@hopper-ui/styled-system 1.2.0 → 2.0.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 (60) hide show
  1. package/CHANGELOG.md +109 -0
  2. package/dist/StyledSystemProvider.css +34 -34
  3. package/dist/StyledSystemProvider.d.ts +3 -0
  4. package/dist/StyledSystemProvider.js +17 -17
  5. package/dist/chunk-2UOTJGT6.js +12 -0
  6. package/dist/{chunk-GFXIV6J4.js → chunk-3KPNXG7H.js} +23 -21
  7. package/dist/{chunk-JKXZGQAL.js → chunk-4E7VQIC5.js} +249 -183
  8. package/dist/{chunk-KLNF34G6.js → chunk-5U5IRAPA.js} +1 -1
  9. package/dist/{chunk-B6ZBFYWJ.js → chunk-6IPAN22Z.js} +3 -3
  10. package/dist/{chunk-EJR6CH3T.js → chunk-6KT6K6NI.js} +1 -1
  11. package/dist/{chunk-ZDENFQ6H.js → chunk-BUQLB5H6.js} +2 -2
  12. package/dist/{chunk-45MYTH4M.js → chunk-CFIMNXX5.js} +2 -2
  13. package/dist/{chunk-KKVEOD5L.js → chunk-FAICHNEU.js} +220 -154
  14. package/dist/{chunk-MCUHAIA4.js → chunk-GXUFWEP5.js} +2 -2
  15. package/dist/{chunk-RKTVEOXM.js → chunk-JSOM3YJJ.js} +6 -6
  16. package/dist/{chunk-LCW3QCQQ.js → chunk-KOWHTPQC.js} +2 -2
  17. package/dist/{chunk-TSYETPJT.js → chunk-KQGCMT5E.js} +5 -5
  18. package/dist/{chunk-E2EGUGKS.js → chunk-LKOZVSXD.js} +289 -221
  19. package/dist/{chunk-DRFY5W7M.js → chunk-NJIDLCB7.js} +1 -1
  20. package/dist/{chunk-J2UW6IZ5.js → chunk-VTGIKL3T.js} +2 -2
  21. package/dist/color-scheme/ColorSchemeContext.js +1 -1
  22. package/dist/color-scheme/useColorScheme.js +3 -3
  23. package/dist/color-scheme/useColorSchemeValue.js +1 -1
  24. package/dist/global-styles/BodyStyleProvider.js +4 -4
  25. package/dist/html-wrappers/html.css +34 -34
  26. package/dist/html-wrappers/html.js +6 -6
  27. package/dist/html-wrappers/htmlElement.css +34 -34
  28. package/dist/html-wrappers/htmlElement.js +5 -5
  29. package/dist/index.css +34 -34
  30. package/dist/index.js +17 -17
  31. package/dist/responsive/BreakpointContext.js +1 -1
  32. package/dist/responsive/BreakpointProvider.d.ts +5 -0
  33. package/dist/responsive/BreakpointProvider.js +3 -3
  34. package/dist/responsive/Breakpoints.js +1 -1
  35. package/dist/responsive/useResponsiveValue.js +1 -1
  36. package/dist/styledSystemProps.js +1 -1
  37. package/dist/styledSystemRootCssClass.js +2 -2
  38. package/dist/tokens/TokenProvider.js +6 -6
  39. package/dist/tokens/generated/darkSemanticTokens.d.ts +279 -211
  40. package/dist/tokens/generated/darkSemanticTokens.js +2 -2
  41. package/dist/tokens/generated/lightSemanticTokens.d.ts +242 -176
  42. package/dist/tokens/generated/lightSemanticTokens.js +2 -2
  43. package/dist/tokens/generated/styledSystemToTokenMappings.d.ts +217 -151
  44. package/dist/tokens/generated/styledSystemToTokenMappings.js +2 -2
  45. package/dist/tokens/tokenMappings.d.ts +286 -206
  46. package/dist/tokens/tokenMappings.js +3 -3
  47. package/dist/tokens/tokens.d.ts +523 -389
  48. package/dist/tokens/tokens.js +4 -4
  49. package/dist/useStyledSystem.css +31 -31
  50. package/dist/useStyledSystem.d.ts +1 -1
  51. package/dist/useStyledSystem.js +4 -4
  52. package/dist/utils/assertion.js +1 -1
  53. package/dist/utils/useInsertStyleElement.js +1 -1
  54. package/dist/utils/useIsomorphicInsertionEffect.js +1 -1
  55. package/dist/utils/useIsomorphicLayoutEffect.js +1 -1
  56. package/dist/utils/useMediaQuery.js +2 -2
  57. package/dist/utils/useThemeComputedStyle.js +2 -2
  58. package/package.json +24 -22
  59. package/dist/chunk-6LX4VMOV.js +0 -26
  60. package/dist/{chunk-M4X2T3D3.js → chunk-T6JS7L6B.js} +1 -1
package/dist/tokens/generated/styledSystemToTokenMappings.d.ts CHANGED
@@ -140,108 +140,124 @@ declare const HopperColors: {
140
140
  core_samoyed: string;
141
141
  };
142
142
  declare const BackgroundColors: {
143
- "upsell-hover": string;
144
- "upsell-weak": string;
145
- "upsell-disabled": string;
146
- "upsell-active": string;
147
- upsell: string;
143
+ "danger-active": string;
144
+ "danger-weak-active": string;
148
145
  danger: string;
146
+ "danger-selected": string;
149
147
  "danger-disabled": string;
150
148
  "danger-hover": string;
149
+ "danger-press": string;
151
150
  "danger-strong": string;
152
151
  "danger-strong-hover": string;
153
152
  "danger-weak": string;
154
- "danger-active": string;
153
+ "danger-weak-hover": string;
154
+ "danger-weak-press": string;
155
+ "neutral-active": string;
156
+ "neutral-weak-active": string;
157
+ neutral: string;
158
+ "neutral-selected": string;
159
+ "neutral-disabled": string;
160
+ "neutral-hover": string;
161
+ "neutral-press": string;
162
+ "neutral-strong": string;
163
+ "neutral-weak": string;
164
+ "neutral-weak-selected": string;
165
+ "neutral-weak-hover": string;
166
+ "neutral-weak-press": string;
167
+ "neutral-weakest": string;
168
+ "neutral-weakest-selected": string;
169
+ "neutral-weakest-hover": string;
170
+ "primary-active": string;
171
+ "primary-strong-active": string;
172
+ "primary-weak-active": string;
173
+ primary: string;
174
+ "primary-selected": string;
155
175
  "primary-disabled": string;
156
176
  "primary-focus": string;
157
- primary: string;
158
- "primary-weak": string;
177
+ "primary-hover": string;
178
+ "primary-press": string;
159
179
  "primary-strong": string;
160
- "primary-strong-active": string;
180
+ "primary-strong-selected": string;
161
181
  "primary-strong-hover": string;
162
- "primary-hover": string;
163
- "primary-active": string;
182
+ "primary-strong-press": string;
183
+ "primary-weak": string;
184
+ "primary-weak-hover": string;
185
+ "primary-weak-press": string;
186
+ "upsell-active": string;
187
+ "upsell-weak-active": string;
188
+ upsell: string;
189
+ "upsell-selected": string;
190
+ "upsell-disabled": string;
191
+ "upsell-hover": string;
192
+ "upsell-press": string;
193
+ "upsell-weak": string;
194
+ "upsell-weak-hover": string;
195
+ "upsell-weak-press": string;
164
196
  "decorative-option9": string;
165
- "decorative-option9-strong": string;
166
197
  "decorative-option9-hover": string;
198
+ "decorative-option9-strong": string;
167
199
  "decorative-option9-weak": string;
168
200
  "decorative-option9-weak-hover": string;
169
201
  "decorative-option9-weakest": string;
170
- "decorative-option8-weakest": string;
171
- "decorative-option8-weak": string;
172
- "decorative-option8-weak-hover": string;
202
+ "decorative-option8": string;
173
203
  "decorative-option8-hover": string;
174
204
  "decorative-option8-strong": string;
175
- "decorative-option8": string;
176
- "decorative-option7-weakest": string;
205
+ "decorative-option8-weak": string;
206
+ "decorative-option8-weak-hover": string;
207
+ "decorative-option8-weakest": string;
208
+ "decorative-option7": string;
209
+ "decorative-option7-hover": string;
210
+ "decorative-option7-strong": string;
177
211
  "decorative-option7-weak": string;
178
212
  "decorative-option7-weak-hover": string;
179
- "decorative-option7-strong": string;
180
- "decorative-option7-hover": string;
181
- "decorative-option7": string;
182
- "decorative-option5-weakest": string;
183
- "decorative-option5-weak": string;
184
- "decorative-option5-strong": string;
185
- "decorative-option5-hover": string;
213
+ "decorative-option7-weakest": string;
186
214
  "decorative-option5": string;
187
- "decorative-option6-weakest": string;
188
- "decorative-option6-weak": string;
189
- "decorative-option6-weak-hover": string;
215
+ "decorative-option5-hover": string;
216
+ "decorative-option5-strong": string;
217
+ "decorative-option5-weak": string;
218
+ "decorative-option5-weak-hover": string;
219
+ "decorative-option5-weakest": string;
220
+ "decorative-option6": string;
190
221
  "decorative-option6-hover": string;
191
222
  "decorative-option6-strong": string;
192
- "decorative-option6": string;
193
- "decorative-option4-weakest": string;
223
+ "decorative-option6-weak": string;
224
+ "decorative-option6-weak-hover": string;
225
+ "decorative-option6-weakest": string;
226
+ "decorative-option4": string;
227
+ "decorative-option4-hover": string;
228
+ "decorative-option4-strong": string;
194
229
  "decorative-option4-weak": string;
195
230
  "decorative-option4-weak-hover": string;
196
- "decorative-option4-strong": string;
197
- "decorative-option4-hover": string;
198
- "decorative-option4": string;
231
+ "decorative-option4-weakest": string;
232
+ "decorative-option3": string;
233
+ "decorative-option3-hover": string;
234
+ "decorative-option3-strong": string;
199
235
  "decorative-option3-weak": string;
200
236
  "decorative-option3-weak-hover": string;
201
237
  "decorative-option3-weakest": string;
202
- "decorative-option3-strong": string;
203
- "decorative-option3-hover": string;
204
- "decorative-option3": string;
205
- "decorative-option2-weakest": string;
206
- "decorative-option2-weak": string;
207
- "decorative-option2-weak-hover": string;
208
- "decorative-option2-strong": string;
209
238
  "decorative-option2": string;
210
239
  "decorative-option2-hover": string;
240
+ "decorative-option2-strong": string;
241
+ "decorative-option2-weak": string;
242
+ "decorative-option2-weak-hover": string;
243
+ "decorative-option2-weakest": string;
244
+ "decorative-option1": string;
245
+ "decorative-option1-hover": string;
246
+ "decorative-option1-strong": string;
211
247
  "decorative-option1-weak": string;
212
248
  "decorative-option1-weak-hover": string;
213
249
  "decorative-option1-weakest": string;
214
- "decorative-option1-strong": string;
215
- "decorative-option1-hover": string;
216
- "decorative-option1": string;
217
- "neutral-weakest-active": string;
218
- "neutral-weakest-hover": string;
219
- "neutral-disabled": string;
220
- "neutral-active": string;
221
- "neutral-weak": string;
222
- neutral: string;
223
- "neutral-strong": string;
224
- "neutral-hover": string;
225
- "neutral-weak-hover": string;
226
- "neutral-weak-active": string;
227
- "neutral-weakest": string;
228
- warning: string;
229
- "warning-strong": string;
230
- "warning-weak": string;
231
- success: string;
232
- "success-strong": string;
233
- "success-weak": string;
234
- "information-strong": string;
235
250
  information: string;
251
+ "information-strong": string;
236
252
  "information-weak": string;
237
- "status-neutral-strong": string;
253
+ "status-caution-strong": string;
254
+ "status-caution": string;
255
+ "status-inactive-strong": string;
256
+ "status-inactive": string;
257
+ "status-negative-strong": string;
258
+ "status-negative": string;
238
259
  "status-neutral": string;
239
- "status-progress-strong": string;
240
- "status-progress": string;
241
- "status-option6-strong": string;
242
- "status-option6": string;
243
- "status-option5-strong": string;
244
- "status-option5": string;
260
+ "status-neutral-strong": string;
245
261
  "status-option1-strong": string;
246
262
  "status-option1": string;
247
263
  "status-option2-strong": string;
@@ -250,96 +266,146 @@ declare const BackgroundColors: {
250
266
  "status-option3": string;
251
267
  "status-option4-strong": string;
252
268
  "status-option4": string;
253
- "status-caution-strong": string;
254
- "status-caution": string;
255
- "status-negative-strong": string;
256
- "status-negative": string;
257
- "status-inactive-strong": string;
258
- "status-inactive": string;
269
+ "status-option5": string;
270
+ "status-option5-strong": string;
271
+ "status-option6": string;
272
+ "status-option6-strong": string;
259
273
  "status-positive-strong": string;
260
274
  "status-positive": string;
275
+ "status-progress": string;
276
+ "status-progress-strong": string;
277
+ success: string;
278
+ "success-strong": string;
279
+ "success-weak": string;
280
+ warning: string;
281
+ "warning-strong": string;
282
+ "warning-weak": string;
261
283
  };
262
284
  declare const TextColors: {
263
- "upsell-active": string;
264
- upsell: string;
265
- "upsell-hover": string;
266
- "upsell-disabled": string;
267
285
  "danger-active": string;
268
- "danger-hover": string;
286
+ "danger-weak-active": string;
269
287
  danger: string;
270
- "danger-weak": string;
288
+ "danger-selected": string;
289
+ "danger-disabled": string;
290
+ "danger-hover": string;
291
+ "danger-press": string;
271
292
  "danger-strong": string;
272
293
  "danger-strong-hover": string;
273
- "danger-disabled": string;
294
+ "danger-weak": string;
295
+ "danger-weak-hover": string;
296
+ "danger-weak-press": string;
297
+ "neutral-active": string;
298
+ "neutral-weak-active": string;
299
+ neutral: string;
300
+ "neutral-selected": string;
301
+ "neutral-disabled": string;
302
+ "neutral-hover": string;
303
+ "neutral-press": string;
304
+ "neutral-strong": string;
305
+ "neutral-weak": string;
306
+ "neutral-weak-hover": string;
307
+ "neutral-weak-press": string;
308
+ "neutral-weakest": string;
274
309
  "primary-active": string;
275
- "primary-disabled": string;
276
310
  primary: string;
311
+ "primary-selected": string;
312
+ "primary-disabled": string;
313
+ "primary-hover": string;
314
+ "primary-press": string;
277
315
  "primary-strong": string;
278
316
  "primary-strong-hover": string;
279
- "primary-hover": string;
317
+ "upsell-active": string;
318
+ "upsell-weak-active": string;
319
+ upsell: string;
320
+ "upsell-selected": string;
321
+ "upsell-disabled": string;
322
+ "upsell-hover": string;
323
+ "upsell-press": string;
324
+ "upsell-weak": string;
325
+ "upsell-weak-hover": string;
326
+ "upsell-weak-press": string;
280
327
  "decorative-option9": string;
281
328
  "decorative-option9-weak": string;
282
- "decorative-option8-weak": string;
283
329
  "decorative-option8": string;
284
- "decorative-option7-weak": string;
330
+ "decorative-option8-weak": string;
285
331
  "decorative-option7": string;
286
- "decorative-option5-weak": string;
332
+ "decorative-option7-weak": string;
287
333
  "decorative-option5": string;
334
+ "decorative-option5-weak": string;
288
335
  "decorative-option6": string;
289
336
  "decorative-option6-weak": string;
290
- "decorative-option4-weak": string;
291
337
  "decorative-option4": string;
338
+ "decorative-option4-weak": string;
292
339
  "decorative-option3": string;
293
340
  "decorative-option3-weak": string;
294
341
  "decorative-option2": string;
295
342
  "decorative-option2-weak": string;
296
- "decorative-option1-weak": string;
297
343
  "decorative-option1": string;
298
- "neutral-hover": string;
299
- "neutral-weak": string;
300
- "neutral-disabled": string;
301
- "neutral-active": string;
302
- "neutral-strong": string;
303
- neutral: string;
304
- "neutral-weakest": string;
305
- "warning-weak": string;
306
- warning: string;
307
- "success-weak": string;
308
- "success-hover": string;
309
- success: string;
344
+ "decorative-option1-weak": string;
310
345
  information: string;
311
346
  "information-weak": string;
347
+ "status-caution": string;
348
+ "status-inactive": string;
349
+ "status-negative": string;
312
350
  "status-neutral": string;
313
- "status-progress": string;
314
- "status-option6": string;
315
- "status-option5": string;
316
351
  "status-option1": string;
317
352
  "status-option2": string;
318
353
  "status-option3": string;
319
354
  "status-option4": string;
320
- "status-caution": string;
321
- "status-negative": string;
322
- "status-inactive": string;
355
+ "status-option5": string;
356
+ "status-option6": string;
323
357
  "status-positive": string;
358
+ "status-progress": string;
359
+ success: string;
360
+ "success-hover": string;
361
+ "success-weak": string;
362
+ warning: string;
363
+ "warning-weak": string;
324
364
  };
325
365
  declare const IconColors: {
326
- "upsell-weakest": string;
327
- "upsell-weak": string;
328
- "upsell-active": string;
329
- upsell: string;
330
366
  "danger-active": string;
367
+ "danger-weak-active": string;
331
368
  danger: string;
332
- "danger-weak": string;
369
+ "danger-selected": string;
370
+ "danger-disabled": string;
371
+ "danger-hover": string;
372
+ "danger-press": string;
333
373
  "danger-strong": string;
334
374
  "danger-strong-hover": string;
335
- "danger-hover": string;
336
- "danger-disabled": string;
375
+ "danger-weak": string;
376
+ "danger-weak-hover": string;
377
+ "danger-weak-press": string;
378
+ "neutral-active": string;
379
+ "neutral-weak-active": string;
380
+ neutral: string;
381
+ "neutral-selected": string;
382
+ "neutral-disabled": string;
383
+ "neutral-hover": string;
384
+ "neutral-press": string;
385
+ "neutral-strong": string;
386
+ "neutral-strong-hover": string;
387
+ "neutral-weak": string;
388
+ "neutral-weak-hover": string;
389
+ "neutral-weak-press": string;
390
+ "neutral-weakest": string;
337
391
  "primary-active": string;
338
- "primary-strong": string;
339
- "primary-strong-hover": string;
340
392
  primary: string;
341
- "primary-hover": string;
393
+ "primary-selected": string;
342
394
  "primary-disabled": string;
395
+ "primary-hover": string;
396
+ "primary-press": string;
397
+ "primary-strong": string;
398
+ "primary-strong-hover": string;
399
+ "upsell-active": string;
400
+ "upsell-weak-active": string;
401
+ upsell: string;
402
+ "upsell-selected": string;
403
+ "upsell-hover": string;
404
+ "upsell-press": string;
405
+ "upsell-weakest": string;
406
+ "upsell-weak": string;
407
+ "upsell-weak-hover": string;
408
+ "upsell-weak-press": string;
343
409
  "decorative-option9": string;
344
410
  "decorative-option8": string;
345
411
  "decorative-option7": string;
@@ -349,46 +415,54 @@ declare const IconColors: {
349
415
  "decorative-option3": string;
350
416
  "decorative-option2": string;
351
417
  "decorative-option1": string;
352
- "neutral-disabled": string;
353
- neutral: string;
354
- "neutral-weak": string;
355
- "neutral-weak-hover": string;
356
- "neutral-weakest": string;
357
- "neutral-strong": string;
358
- "neutral-hover": string;
359
- "neutral-active": string;
360
- "warning-weakest": string;
361
- "warning-weak": string;
362
- warning: string;
363
- "success-weak": string;
364
- "success-weakest": string;
365
- success: string;
418
+ information: string;
366
419
  "information-weakest": string;
367
420
  "information-weak": string;
368
- information: string;
421
+ "status-caution": string;
422
+ "status-inactive": string;
423
+ "status-negative": string;
369
424
  "status-neutral": string;
370
- "status-progress": string;
371
- "status-option6": string;
372
- "status-option5": string;
373
425
  "status-option1": string;
374
426
  "status-option2": string;
375
427
  "status-option3": string;
376
428
  "status-option4": string;
377
- "status-caution": string;
378
- "status-negative": string;
379
- "status-inactive": string;
429
+ "status-option5": string;
430
+ "status-option6": string;
380
431
  "status-positive": string;
432
+ "status-progress": string;
433
+ success: string;
434
+ "success-weakest": string;
435
+ "success-weak": string;
436
+ warning: string;
437
+ "warning-weakest": string;
438
+ "warning-weak": string;
381
439
  };
382
440
  declare const BorderColors: {
383
- "upsell-active": string;
384
- upsell: string;
385
- "upsell-disabled": string;
386
441
  "danger-active": string;
387
- "danger-strong": string;
388
442
  danger: string;
443
+ "danger-selected": string;
444
+ "danger-strong": string;
445
+ "danger-press": string;
446
+ "neutral-active": string;
447
+ neutral: string;
448
+ "neutral-selected": string;
449
+ "neutral-disabled": string;
450
+ "neutral-hover": string;
451
+ "neutral-press": string;
452
+ "neutral-strong": string;
453
+ "neutral-strong-hover": string;
454
+ "neutral-weak": string;
455
+ "neutral-weakest": string;
389
456
  "primary-active": string;
390
- "primary-focus": string;
391
457
  primary: string;
458
+ "primary-selected": string;
459
+ "primary-focus": string;
460
+ "primary-press": string;
461
+ "upsell-active": string;
462
+ upsell: string;
463
+ "upsell-selected": string;
464
+ "upsell-disabled": string;
465
+ "upsell-press": string;
392
466
  "decorative-option9": string;
393
467
  "decorative-option8": string;
394
468
  "decorative-option7": string;
@@ -398,17 +472,9 @@ declare const BorderColors: {
398
472
  "decorative-option3": string;
399
473
  "decorative-option2": string;
400
474
  "decorative-option1": string;
401
- "neutral-disabled": string;
402
- "neutral-strong-hover": string;
403
- "neutral-strong": string;
404
- neutral: string;
405
- "neutral-weak": string;
406
- "neutral-hover": string;
407
- "neutral-active": string;
408
- "neutral-weakest": string;
409
- warning: string;
410
- success: string;
411
475
  information: string;
476
+ success: string;
477
+ warning: string;
412
478
  };
413
479
  declare const DataVizColors: {
414
480
  "dataviz_monochromatic-primary-25": string;
package/dist/tokens/generated/styledSystemToTokenMappings.js CHANGED
@@ -1,2 +1,2 @@
1
- export { BackgroundColors, BorderColors, CoreSpace, DataVizColors, Elevation, FontFamily, FontSize, FontWeight, HopperColors, HopperVariablePrefix, IconColors, LineHeight, SemanticComplexMarginSpace, SemanticComplexPaddingSpace, SemanticSimpleMarginSpace, SemanticSimplePaddingSpace, Shape, TextColors } from '../../chunk-KKVEOD5L.js';
2
- import '../../chunk-6LX4VMOV.js';
1
+ export { BackgroundColors, BorderColors, CoreSpace, DataVizColors, Elevation, FontFamily, FontSize, FontWeight, HopperColors, HopperVariablePrefix, IconColors, LineHeight, SemanticComplexMarginSpace, SemanticComplexPaddingSpace, SemanticSimpleMarginSpace, SemanticSimplePaddingSpace, Shape, TextColors } from '../../chunk-FAICHNEU.js';
2
+ import '../../chunk-2UOTJGT6.js';