@hyphen/hyphen-components 7.8.1 → 7.9.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 (16) hide show
  1. package/dist/css/index.css +26 -1
  2. package/dist/css/utilities.css +37 -1
  3. package/dist/css/variables.css +9 -0
  4. package/dist/hyphen-components.cjs.development.js +1 -1
  5. package/dist/hyphen-components.cjs.development.js.map +1 -1
  6. package/dist/hyphen-components.cjs.production.min.js +1 -1
  7. package/dist/hyphen-components.cjs.production.min.js.map +1 -1
  8. package/dist/hyphen-components.esm.js +1 -1
  9. package/dist/hyphen-components.esm.js.map +1 -1
  10. package/dist/index.d.ts +1 -1
  11. package/package.json +2 -2
  12. package/src/components/Button/Button.constants.ts +1 -0
  13. package/src/components/Button/Button.module.scss +32 -1
  14. package/src/components/Button/Button.stories.tsx +1 -0
  15. package/src/components/Button/Button.test.tsx +12 -8
  16. package/src/components/Button/Button.tsx +1 -0
package/dist/css/index.css CHANGED
@@ -234,7 +234,8 @@
234
234
  :root {
235
235
  --button-box-shadow-focus: 0 0 0 4px var(--color-base-grey-300);
236
236
  --button-neutral-box-shadow-focus: 0 0 0 4px var(--color-base-grey-200);
237
- --button-danger-box-shadow-focus: 0 0 0 4px var(--color-base-danger-200);
237
+ --button-danger-box-shadow-focus: 0 0 0 4px var(--color-base-red-200);
238
+ --button-success-box-shadow-focus: 0 0 0 4px var(--color-base-green-200);
238
239
  }
239
240
 
240
241
  .button__IlzP0.size-sm__h7ftc, .size-sm__h7ftc {
@@ -396,6 +397,30 @@
396
397
  outline: 0;
397
398
  box-shadow: none;
398
399
  }
400
+ .button__IlzP0.success__qWo4I {
401
+ background-color: var(--color-background-button-success);
402
+ color: var(--color-font-button-success);
403
+ }
404
+ .button__IlzP0.success__qWo4I:not(:disabled):hover {
405
+ background-color: var(--color-background-button-success-hover);
406
+ color: var(--color-font-button-success-hover);
407
+ }
408
+ .button__IlzP0.success__qWo4I:not(:disabled):active {
409
+ background-color: var(--color-background-button-success-active);
410
+ color: var(--color-font-button-success-active);
411
+ }
412
+ .button__IlzP0.success__qWo4I:focus {
413
+ outline: 0;
414
+ box-shadow: var(--button-success-box-shadow-focus);
415
+ }
416
+ .button__IlzP0.success__qWo4I:focus-visible {
417
+ outline: 0;
418
+ box-shadow: var(--button-success-box-shadow-focus);
419
+ }
420
+ .button__IlzP0.success__qWo4I:focus:not(:focus-visible) {
421
+ outline: 0;
422
+ box-shadow: none;
423
+ }
399
424
  .button__IlzP0.link__m4Od9 {
400
425
  display: inline-flex;
401
426
  background-color: transparent;
package/dist/css/utilities.css CHANGED
@@ -3,7 +3,7 @@
3
3
  \********************************************************************************************************************************************************/
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Thu, 09 Jul 2026 18:43:08 GMT
6
+ * Generated on Fri, 24 Jul 2026 18:50:17 GMT
7
7
  */
8
8
 
9
9
  .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -150,6 +150,24 @@
150
150
 
151
151
  .focus\:background-color-button-danger-active:focus { background: var(--color-background-button-danger-active); }
152
152
 
153
+ .background-color-button-success { background: var(--color-background-button-success); }
154
+
155
+ .hover\:background-color-button-success:hover { background: var(--color-background-button-success); }
156
+
157
+ .focus\:background-color-button-success:focus { background: var(--color-background-button-success); }
158
+
159
+ .background-color-button-success-hover { background: var(--color-background-button-success-hover); }
160
+
161
+ .hover\:background-color-button-success-hover:hover { background: var(--color-background-button-success-hover); }
162
+
163
+ .focus\:background-color-button-success-hover:focus { background: var(--color-background-button-success-hover); }
164
+
165
+ .background-color-button-success-active { background: var(--color-background-button-success-active); }
166
+
167
+ .hover\:background-color-button-success-active:hover { background: var(--color-background-button-success-active); }
168
+
169
+ .focus\:background-color-button-success-active:focus { background: var(--color-background-button-success-active); }
170
+
153
171
  .background-color-badge-default { background: var(--color-background-badge-default); }
154
172
 
155
173
  .hover\:background-color-badge-default:hover { background: var(--color-background-badge-default); }
@@ -828,6 +846,24 @@
828
846
 
829
847
  .focus\:font-color-button-danger-active:focus { color: var(--color-font-button-danger-active); }
830
848
 
849
+ .font-color-button-success { color: var(--color-font-button-success); }
850
+
851
+ .hover\:font-color-button-success:hover { color: var(--color-font-button-success); }
852
+
853
+ .focus\:font-color-button-success:focus { color: var(--color-font-button-success); }
854
+
855
+ .font-color-button-success-hover { color: var(--color-font-button-success-hover); }
856
+
857
+ .hover\:font-color-button-success-hover:hover { color: var(--color-font-button-success-hover); }
858
+
859
+ .focus\:font-color-button-success-hover:focus { color: var(--color-font-button-success-hover); }
860
+
861
+ .font-color-button-success-active { color: var(--color-font-button-success-active); }
862
+
863
+ .hover\:font-color-button-success-active:hover { color: var(--color-font-button-success-active); }
864
+
865
+ .focus\:font-color-button-success-active:focus { color: var(--color-font-button-success-active); }
866
+
831
867
  .font-color-badge-default { color: var(--color-font-badge-default); }
832
868
 
833
869
  .hover\:font-color-badge-default:hover { color: var(--color-font-badge-default); }
package/dist/css/variables.css CHANGED
@@ -32,6 +32,9 @@
32
32
  --color-background-button-danger: #ef4444;
33
33
  --color-background-button-danger-hover: #dc2626;
34
34
  --color-background-button-danger-active: #b91c1c;
35
+ --color-background-button-success: #15803d;
36
+ --color-background-button-success-hover: #166534;
37
+ --color-background-button-success-active: #12622f;
35
38
  --color-background-badge-default: #171717;
36
39
  --color-background-badge-secondary: #e5e5e5;
37
40
  --color-background-badge-danger: #fef2f2;
@@ -208,6 +211,9 @@
208
211
  --color-font-button-danger: #FFFFFF;
209
212
  --color-font-button-danger-hover: #FFFFFF;
210
213
  --color-font-button-danger-active: #FFFFFF;
214
+ --color-font-button-success: #FFFFFF;
215
+ --color-font-button-success-hover: #FFFFFF;
216
+ --color-font-button-success-active: #FFFFFF;
211
217
  --color-font-badge-default: #FFFFFF;
212
218
  --color-font-badge-secondary: #262626;
213
219
  --color-font-badge-danger: #dc2626;
@@ -407,6 +413,9 @@
407
413
  --color-background-button-danger: #ef4444;
408
414
  --color-background-button-danger-hover: #dc2626;
409
415
  --color-background-button-danger-active: #b91c1c;
416
+ --color-background-button-success: #15803d;
417
+ --color-background-button-success-hover: #166534;
418
+ --color-background-button-success-active: #12622f;
410
419
  --color-background-badge-default: #FFFFFF;
411
420
  --color-background-badge-secondary: #404040;
412
421
  --color-background-badge-danger: #7f1d1d;
package/dist/hyphen-components.cjs.development.js CHANGED
@@ -1014,7 +1014,7 @@ var Spinner = ({ className, size = "md" }) => {
1014
1014
  var import_classnames6 = __toESM(require("classnames"));
1015
1015
 
1016
1016
  // src/components/Button/Button.module.scss
1017
- var Button_module_default = { "button": "button__IlzP0", "size-sm": "size-sm__h7ftc", "size-md": "size-md__avby3", "size-lg": "size-lg__5TYnZ", "primary": "primary__TcKe0", "secondary": "secondary__NWjA6", "tertiary": "tertiary__TvVwZ", "danger": "danger__Zsppp", "link": "link__m4Od9", "size-sm-tablet": "size-sm-tablet__TaC88", "size-md-tablet": "size-md-tablet__d81CE", "size-lg-tablet": "size-lg-tablet__9ed09", "size-sm-desktop": "size-sm-desktop__YVs4Q", "size-md-desktop": "size-md-desktop__g0hPr", "size-lg-desktop": "size-lg-desktop__f9alo", "size-sm-hd": "size-sm-hd__KgnEC", "size-md-hd": "size-md-hd__4gvyq", "size-lg-hd": "size-lg-hd__EJmWo", "loading": "loading__xqQBF", "label": "label__q462a", "full-width": "full-width__uXYq8", "spinner-wrapper": "spinner-wrapper__iXJhk" };
1017
+ var Button_module_default = { "button": "button__IlzP0", "size-sm": "size-sm__h7ftc", "size-md": "size-md__avby3", "size-lg": "size-lg__5TYnZ", "primary": "primary__TcKe0", "secondary": "secondary__NWjA6", "tertiary": "tertiary__TvVwZ", "danger": "danger__Zsppp", "success": "success__qWo4I", "link": "link__m4Od9", "size-sm-tablet": "size-sm-tablet__TaC88", "size-md-tablet": "size-md-tablet__d81CE", "size-lg-tablet": "size-lg-tablet__9ed09", "size-sm-desktop": "size-sm-desktop__YVs4Q", "size-md-desktop": "size-md-desktop__g0hPr", "size-lg-desktop": "size-lg-desktop__f9alo", "size-sm-hd": "size-sm-hd__KgnEC", "size-md-hd": "size-md-hd__4gvyq", "size-lg-hd": "size-lg-hd__EJmWo", "loading": "loading__xqQBF", "label": "label__q462a", "full-width": "full-width__uXYq8", "spinner-wrapper": "spinner-wrapper__iXJhk" };
1018
1018
 
1019
1019
  // src/components/Button/Button.tsx
1020
1020
  var Button = (0, import_react7.forwardRef)(