@hyphen/hyphen-components 7.10.0 → 8.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 (41) hide show
  1. package/dist/css/fonts.css +1 -1
  2. package/dist/css/index.css +292 -150
  3. package/dist/css/reset.css +1 -1
  4. package/dist/css/utilities.css +480 -38
  5. package/dist/css/variables.css +170 -25
  6. package/dist/hyphen-components.cjs.development.js +244 -311
  7. package/dist/hyphen-components.cjs.development.js.map +1 -1
  8. package/dist/hyphen-components.cjs.production.min.js +2 -2
  9. package/dist/hyphen-components.cjs.production.min.js.map +1 -1
  10. package/dist/hyphen-components.esm.js +198 -265
  11. package/dist/hyphen-components.esm.js.map +1 -1
  12. package/dist/index.d.ts +25 -60
  13. package/package.json +3 -3
  14. package/src/components/Alert/Alert.mdx +1 -1
  15. package/src/components/Alert/Alert.module.scss +29 -34
  16. package/src/components/Alert/Alert.stories.tsx +11 -3
  17. package/src/components/Alert/Alert.test.tsx +17 -11
  18. package/src/components/Alert/Alert.tsx +9 -16
  19. package/src/components/Badge/Badge.mdx +46 -4
  20. package/src/components/Badge/Badge.module.scss +235 -185
  21. package/src/components/Badge/Badge.stories.tsx +126 -36
  22. package/src/components/Badge/Badge.test.tsx +180 -21
  23. package/src/components/Badge/Badge.tsx +56 -21
  24. package/src/components/Drawer/Drawer.mdx +14 -16
  25. package/src/components/Formik/Formik.stories.tsx +3 -5
  26. package/src/components/Formik/FormikTimePicker/FormikTimePicker.test.tsx +34 -67
  27. package/src/components/Formik/FormikTimePicker/FormikTimePicker.tsx +0 -2
  28. package/src/components/Table/Table.stories.tsx +4 -4
  29. package/src/components/TimePicker/TimePicker.mdx +3 -11
  30. package/src/components/TimePicker/TimePicker.stories.tsx +61 -60
  31. package/src/components/TimePicker/TimePicker.test.tsx +76 -7
  32. package/src/components/TimePicker/TimePicker.tsx +37 -7
  33. package/src/components/Tooltip/Tooltip.stories.tsx +1 -1
  34. package/src/docs/Colors.mdx +13 -0
  35. package/src/index.ts +0 -2
  36. package/src/components/Formik/FormikTimePickerNative/FormikTimePickerNative.test.tsx +0 -175
  37. package/src/components/Formik/FormikTimePickerNative/FormikTimePickerNative.tsx +0 -38
  38. package/src/components/TimePickerNative/TimePickerNative.mdx +0 -67
  39. package/src/components/TimePickerNative/TimePickerNative.stories.tsx +0 -150
  40. package/src/components/TimePickerNative/TimePickerNative.test.tsx +0 -117
  41. package/src/components/TimePickerNative/TimePickerNative.tsx +0 -93
package/dist/css/variables.css CHANGED
@@ -35,10 +35,35 @@
35
35
  --color-background-button-success: #15803d;
36
36
  --color-background-button-success-hover: #166534;
37
37
  --color-background-button-success-active: #12622f;
38
- --color-background-badge-default: #171717;
39
- --color-background-badge-secondary: #e5e5e5;
40
- --color-background-badge-danger: #fef2f2;
41
- --color-background-badge-outline: transparent;
38
+ --color-background-badge-solid-grey: #171717;
39
+ --color-background-badge-soft-grey: #e5e5e5;
40
+ --color-background-badge-surface-grey: #e5e5e5;
41
+ --color-background-badge-solid-blue: #3b82f6;
42
+ --color-background-badge-soft-blue: #f0f9ff;
43
+ --color-background-badge-surface-blue: #dbeafe;
44
+ --color-background-badge-solid-green: #16a34a;
45
+ --color-background-badge-soft-green: #f0fdf4;
46
+ --color-background-badge-surface-green: #dcfce7;
47
+ --color-background-badge-solid-yellow: #ffc800;
48
+ --color-background-badge-soft-yellow: #fefce8;
49
+ --color-background-badge-surface-yellow: #fef9c3;
50
+ --color-background-badge-solid-red: #ef4444;
51
+ --color-background-badge-soft-red: #fef2f2;
52
+ --color-background-badge-surface-red: #fee2e2;
53
+ --color-background-badge-solid-purple: #a855f7;
54
+ --color-background-badge-soft-purple: #faf5ff;
55
+ --color-background-badge-surface-purple: #f3e8ff;
56
+ --color-background-badge-solid-orange: #f97316;
57
+ --color-background-badge-soft-orange: #fff7ed;
58
+ --color-background-badge-surface-orange: #ffedd5;
59
+ --color-background-badge-solid-brand: linear-gradient(60deg, #eab308 0%, #FA0A64 100%);
60
+ --color-background-badge-soft-brand: #fff7ed;
61
+ --color-background-badge-surface-brand: #ffedd5;
62
+ --color-background-alert-default: #e5e5e5;
63
+ --color-background-alert-info: #dbeafe;
64
+ --color-background-alert-success: #dcfce7;
65
+ --color-background-alert-warning: #fef9c3;
66
+ --color-background-alert-danger: #fee2e2;
42
67
  --color-background-toggle-group-item-hover: rgba(0, 0, 0, 0.1);
43
68
  --color-background-toggle-group-item-active: rgba(0, 0, 0, 0.1);
44
69
  --color-background-scrollbar-thumb: #d4d4d4;
@@ -113,6 +138,16 @@
113
138
  --color-base-yellow-700: #a16207;
114
139
  --color-base-yellow-800: #854d0e;
115
140
  --color-base-yellow-900: #713f12;
141
+ --color-base-orange-50: #fff7ed;
142
+ --color-base-orange-100: #ffedd5;
143
+ --color-base-orange-200: #fed7aa;
144
+ --color-base-orange-300: #fdba74;
145
+ --color-base-orange-400: #ff911e;
146
+ --color-base-orange-500: #f97316;
147
+ --color-base-orange-600: #ea580c;
148
+ --color-base-orange-700: #c2410c;
149
+ --color-base-orange-800: #9a3412;
150
+ --color-base-orange-900: #7c2d12;
116
151
  --color-base-red-50: #fef2f2;
117
152
  --color-base-red-100: #fee2e2;
118
153
  --color-base-red-200: #fecaca;
@@ -152,10 +187,35 @@
152
187
  --color-border-button-tertiary: transparent;
153
188
  --color-border-button-tertiary-hover: transparent;
154
189
  --color-border-button-tertiary-active: transparent;
155
- --color-border-badge-default: #171717;
156
- --color-border-badge-secondary: #e5e5e5;
157
- --color-border-badge-danger: #fee2e2;
158
- --color-border-badge-outline: #d4d4d4;
190
+ --color-border-badge-solid-grey: #171717;
191
+ --color-border-badge-surface-grey: #a3a3a3;
192
+ --color-border-badge-outline-grey: #d4d4d4;
193
+ --color-border-badge-solid-blue: #2563eb;
194
+ --color-border-badge-surface-blue: #93c5fd;
195
+ --color-border-badge-outline-blue: #bfdbfe;
196
+ --color-border-badge-solid-green: #15803d;
197
+ --color-border-badge-surface-green: #86efac;
198
+ --color-border-badge-outline-green: #bbf7d0;
199
+ --color-border-badge-solid-yellow: #eab308;
200
+ --color-border-badge-surface-yellow: #fde047;
201
+ --color-border-badge-outline-yellow: #fef08a;
202
+ --color-border-badge-solid-red: #dc2626;
203
+ --color-border-badge-surface-red: #fca5a5;
204
+ --color-border-badge-outline-red: #fecaca;
205
+ --color-border-badge-solid-purple: #9333ea;
206
+ --color-border-badge-surface-purple: #d8b4fe;
207
+ --color-border-badge-outline-purple: #e9d5ff;
208
+ --color-border-badge-solid-orange: #ea580c;
209
+ --color-border-badge-surface-orange: #fdba74;
210
+ --color-border-badge-outline-orange: #fed7aa;
211
+ --color-border-badge-solid-brand: #eab308;
212
+ --color-border-badge-surface-brand: #fdba74;
213
+ --color-border-badge-outline-brand: #fed7aa;
214
+ --color-border-alert-default: #a3a3a3;
215
+ --color-border-alert-info: #93c5fd;
216
+ --color-border-alert-success: #86efac;
217
+ --color-border-alert-warning: #fde047;
218
+ --color-border-alert-danger: #fca5a5;
159
219
  --color-border-sidebar-rail-hover: #d4d4d4;
160
220
  --color-border-toast: #171717;
161
221
  --color-border-toast-error: #dc2626;
@@ -214,10 +274,27 @@
214
274
  --color-font-button-success: #FFFFFF;
215
275
  --color-font-button-success-hover: #FFFFFF;
216
276
  --color-font-button-success-active: #FFFFFF;
217
- --color-font-badge-default: #FFFFFF;
218
- --color-font-badge-secondary: #262626;
219
- --color-font-badge-danger: #dc2626;
220
- --color-font-badge-outline: #262626;
277
+ --color-font-badge-solid-grey: #FFFFFF;
278
+ --color-font-badge-soft-grey: #262626;
279
+ --color-font-badge-solid-blue: #FFFFFF;
280
+ --color-font-badge-soft-blue: #1d4ed8;
281
+ --color-font-badge-solid-green: #FFFFFF;
282
+ --color-font-badge-soft-green: #166534;
283
+ --color-font-badge-solid-yellow: #000000;
284
+ --color-font-badge-soft-yellow: #a16207;
285
+ --color-font-badge-solid-red: #FFFFFF;
286
+ --color-font-badge-soft-red: #b91c1c;
287
+ --color-font-badge-solid-purple: #FFFFFF;
288
+ --color-font-badge-soft-purple: #7e22ce;
289
+ --color-font-badge-solid-orange: #FFFFFF;
290
+ --color-font-badge-soft-orange: #c2410c;
291
+ --color-font-badge-solid-brand: #FFFFFF;
292
+ --color-font-badge-soft-brand: #c2410c;
293
+ --color-font-alert-default: #262626;
294
+ --color-font-alert-info: #1d4ed8;
295
+ --color-font-alert-success: #166534;
296
+ --color-font-alert-warning: #a16207;
297
+ --color-font-alert-danger: #b91c1c;
221
298
  --color-font-toast: #f5f5f5;
222
299
  --color-font-toast-error: #FFFFFF;
223
300
  --color-font-tooltip: #f5f5f5;
@@ -273,6 +350,7 @@
273
350
  --size-border-radius-xl: 0.75rem;
274
351
  --size-border-radius-2xl: 1rem;
275
352
  --size-border-radius-3xl: 2rem;
353
+ --size-border-radius-full: 9999rem;
276
354
  --size-box-shadow-0: 0 0 #000000;
277
355
  --size-box-shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
278
356
  --size-box-shadow-xs: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
@@ -416,10 +494,35 @@
416
494
  --color-background-button-success: #15803d;
417
495
  --color-background-button-success-hover: #166534;
418
496
  --color-background-button-success-active: #12622f;
419
- --color-background-badge-default: #FFFFFF;
420
- --color-background-badge-secondary: #404040;
421
- --color-background-badge-danger: #7f1d1d;
422
- --color-background-badge-outline: transparent;
497
+ --color-background-badge-solid-grey: #FFFFFF;
498
+ --color-background-badge-soft-grey: #404040;
499
+ --color-background-badge-surface-grey: #404040;
500
+ --color-background-badge-solid-blue: #3b82f6;
501
+ --color-background-badge-soft-blue: #1e3a8a;
502
+ --color-background-badge-surface-blue: #1e3a8a;
503
+ --color-background-badge-solid-green: #16a34a;
504
+ --color-background-badge-soft-green: #14532d;
505
+ --color-background-badge-surface-green: #14532d;
506
+ --color-background-badge-solid-yellow: #ffc800;
507
+ --color-background-badge-soft-yellow: #713f12;
508
+ --color-background-badge-surface-yellow: #713f12;
509
+ --color-background-badge-solid-red: #ef4444;
510
+ --color-background-badge-soft-red: #7f1d1d;
511
+ --color-background-badge-surface-red: #7f1d1d;
512
+ --color-background-badge-solid-purple: #a855f7;
513
+ --color-background-badge-soft-purple: #581c87;
514
+ --color-background-badge-surface-purple: #581c87;
515
+ --color-background-badge-solid-orange: #f97316;
516
+ --color-background-badge-soft-orange: #7c2d12;
517
+ --color-background-badge-surface-orange: #7c2d12;
518
+ --color-background-badge-solid-brand: linear-gradient(60deg, #eab308 0%, #FA0A64 100%);
519
+ --color-background-badge-soft-brand: #7c2d12;
520
+ --color-background-badge-surface-brand: #7c2d12;
521
+ --color-background-alert-default: #404040;
522
+ --color-background-alert-info: #1e3a8a;
523
+ --color-background-alert-success: #14532d;
524
+ --color-background-alert-warning: #713f12;
525
+ --color-background-alert-danger: #7f1d1d;
423
526
  --color-background-toggle-group-item-hover: rgba(255, 255, 255, .1);
424
527
  --color-background-toggle-group-item-active: rgba(255, 255, 255, .1);
425
528
  --color-background-scrollbar-thumb: #525252;
@@ -448,10 +551,35 @@
448
551
  --color-border-button-tertiary: transparent;
449
552
  --color-border-button-tertiary-hover: transparent;
450
553
  --color-border-button-tertiary-active: transparent;
451
- --color-border-badge-default: #FFFFFF;
452
- --color-border-badge-secondary: #262626;
453
- --color-border-badge-danger: #991b1b;
454
- --color-border-badge-outline: #404040;
554
+ --color-border-badge-solid-grey: #FFFFFF;
555
+ --color-border-badge-surface-grey: #737373;
556
+ --color-border-badge-outline-grey: #404040;
557
+ --color-border-badge-solid-blue: #2563eb;
558
+ --color-border-badge-surface-blue: #1d4ed8;
559
+ --color-border-badge-outline-blue: #1d4ed8;
560
+ --color-border-badge-solid-green: #15803d;
561
+ --color-border-badge-surface-green: #166534;
562
+ --color-border-badge-outline-green: #166534;
563
+ --color-border-badge-solid-yellow: #eab308;
564
+ --color-border-badge-surface-yellow: #a16207;
565
+ --color-border-badge-outline-yellow: #a16207;
566
+ --color-border-badge-solid-red: #dc2626;
567
+ --color-border-badge-surface-red: #b91c1c;
568
+ --color-border-badge-outline-red: #b91c1c;
569
+ --color-border-badge-solid-purple: #9333ea;
570
+ --color-border-badge-surface-purple: #7e22ce;
571
+ --color-border-badge-outline-purple: #7e22ce;
572
+ --color-border-badge-solid-orange: #ea580c;
573
+ --color-border-badge-surface-orange: #c2410c;
574
+ --color-border-badge-outline-orange: #c2410c;
575
+ --color-border-badge-solid-brand: #eab308;
576
+ --color-border-badge-surface-brand: #c2410c;
577
+ --color-border-badge-outline-brand: #c2410c;
578
+ --color-border-alert-default: #737373;
579
+ --color-border-alert-info: #1d4ed8;
580
+ --color-border-alert-success: #166534;
581
+ --color-border-alert-warning: #a16207;
582
+ --color-border-alert-danger: #b91c1c;
455
583
  --color-border-sidebar-rail-hover: #737373;
456
584
  --color-border-toast: #e5e5e5;
457
585
  --color-border-checkbox: #737373;
@@ -476,10 +604,27 @@
476
604
  --color-font-button-tertiary: #FFFFFF;
477
605
  --color-font-button-tertiary-hover: #FFFFFF;
478
606
  --color-font-button-tertiary-active: #FFFFFF;
479
- --color-font-badge-default: #171717;
480
- --color-font-badge-secondary: #e5e5e5;
481
- --color-font-badge-danger: #f87171;
482
- --color-font-badge-outline: #e5e5e5;
607
+ --color-font-badge-solid-grey: #171717;
608
+ --color-font-badge-soft-grey: #e5e5e5;
609
+ --color-font-badge-solid-blue: #FFFFFF;
610
+ --color-font-badge-soft-blue: #bfdbfe;
611
+ --color-font-badge-solid-green: #FFFFFF;
612
+ --color-font-badge-soft-green: #bbf7d0;
613
+ --color-font-badge-solid-yellow: #000000;
614
+ --color-font-badge-soft-yellow: #fef08a;
615
+ --color-font-badge-solid-red: #FFFFFF;
616
+ --color-font-badge-soft-red: #fecaca;
617
+ --color-font-badge-solid-purple: #FFFFFF;
618
+ --color-font-badge-soft-purple: #e9d5ff;
619
+ --color-font-badge-solid-orange: #FFFFFF;
620
+ --color-font-badge-soft-orange: #fed7aa;
621
+ --color-font-badge-solid-brand: #FFFFFF;
622
+ --color-font-badge-soft-brand: #fed7aa;
623
+ --color-font-alert-default: #e5e5e5;
624
+ --color-font-alert-info: #bfdbfe;
625
+ --color-font-alert-success: #bbf7d0;
626
+ --color-font-alert-warning: #fef08a;
627
+ --color-font-alert-danger: #fecaca;
483
628
  --color-font-toast: #404040;
484
629
  --color-font-tooltip: #404040;
485
630
  --color-font-popover: #f5f5f5;
@@ -487,7 +632,7 @@
487
632
  }
488
633
 
489
634
  /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
490
- !*** css ../../node_modules/.pnpm/css-loader@6.11.0_webpack@5.94.0/node_modules/css-loader/dist/cjs.js!../../node_modules/.pnpm/sass-loader@13.3.3_sass@1.77.8_webpack@5.94.0/node_modules/sass-loader/dist/cjs.js!../../node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.5.10_typescript@5.9.3_webpack@5.94.0/node_modules/postcss-loader/dist/cjs.js!./src/styles/variables/index.scss ***!
635
+ !*** css ../../node_modules/.pnpm/css-loader@6.11.0_webpack@5.94.0/node_modules/css-loader/dist/cjs.js!../../node_modules/.pnpm/sass-loader@13.3.3_sass@1.77.8_webpack@5.94.0/node_modules/sass-loader/dist/cjs.js!../../node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.5.18_typescript@5.9.3_webpack@5.94.0/node_modules/postcss-loader/dist/cjs.js!./src/styles/variables/index.scss ***!
491
636
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
492
637
  .hyphen-components__variables__form-control {
493
638
  --INTERNAL_form-control-box-shadow-focus: 0 0 0 3px var(--color-border-subtle);