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