@hyphen/hyphen-components 7.4.0 → 7.5.0

package/dist/css/index.css

@@ -96,7 +96,7 @@
 .badge__wbyII {
   border-style: solid;
   border-width: var(--size-border-width-sm);
-  font-weight: var(--size-font-weight-semibold);
+  font-weight: var(--size-font-weight-medium);
   line-height: var(--size-line-height-base);
 }
 .badge__wbyII.inverse__gQfNV {
@@ -104,6 +104,26 @@
   border-color: var(--color-background-inverse);
   color: var(--color-font-inverse);
 }
+.badge__wbyII.default__DFAbi {
+  background-color: var(--color-background-badge-default);
+  border-color: var(--color-border-badge-default);
+  color: var(--color-font-badge-default);
+}
+.badge__wbyII.secondary__ZPoaQ {
+  background-color: var(--color-background-badge-secondary);
+  border-color: var(--color-border-badge-secondary);
+  color: var(--color-font-badge-secondary);
+}
+.badge__wbyII.danger__ImdGy {
+  background-color: var(--color-background-badge-danger);
+  border-color: var(--color-border-badge-danger);
+  color: var(--color-font-badge-danger);
+}
+.badge__wbyII.outline__jrc2I {
+  background-color: var(--color-background-badge-outline);
+  border-color: var(--color-border-badge-outline);
+  color: var(--color-font-badge-outline);
+}
 .badge__wbyII.purple__81ewe {
   background-color: var(--color-base-purple-500);
   border-color: var(--color-base-purple-600);

package/dist/css/utilities.css

@@ -3,7 +3,7 @@
   \***************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Mon, 16 Mar 2026 23:37:02 GMT
+ * Generated on Mon, 06 Apr 2026 19:32:43 GMT
  */
 
 .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -150,6 +150,30 @@
 
 .focus\:background-color-button-danger-active:focus { background: var(--color-background-button-danger-active); }
 
+.background-color-badge-default { background: var(--color-background-badge-default); }
+
+.hover\:background-color-badge-default:hover { background: var(--color-background-badge-default); }
+
+.focus\:background-color-badge-default:focus { background: var(--color-background-badge-default); }
+
+.background-color-badge-secondary { background: var(--color-background-badge-secondary); }
+
+.hover\:background-color-badge-secondary:hover { background: var(--color-background-badge-secondary); }
+
+.focus\:background-color-badge-secondary:focus { background: var(--color-background-badge-secondary); }
+
+.background-color-badge-danger { background: var(--color-background-badge-danger); }
+
+.hover\:background-color-badge-danger:hover { background: var(--color-background-badge-danger); }
+
+.focus\:background-color-badge-danger:focus { background: var(--color-background-badge-danger); }
+
+.background-color-badge-outline { background: var(--color-background-badge-outline); }
+
+.hover\:background-color-badge-outline:hover { background: var(--color-background-badge-outline); }
+
+.focus\:background-color-badge-outline:focus { background: var(--color-background-badge-outline); }
+
 .background-color-toggle-group-item-hover { background: var(--color-background-toggle-group-item-hover); }
 
 .hover\:background-color-toggle-group-item-hover:hover { background: var(--color-background-toggle-group-item-hover); }
@@ -450,6 +474,30 @@
 
 .focus\:border-color-button-tertiary-active:focus { border-color: var(--color-border-button-tertiary-active); }
 
+.border-color-badge-default { border-color: var(--color-border-badge-default); }
+
+.hover\:border-color-badge-default:hover { border-color: var(--color-border-badge-default); }
+
+.focus\:border-color-badge-default:focus { border-color: var(--color-border-badge-default); }
+
+.border-color-badge-secondary { border-color: var(--color-border-badge-secondary); }
+
+.hover\:border-color-badge-secondary:hover { border-color: var(--color-border-badge-secondary); }
+
+.focus\:border-color-badge-secondary:focus { border-color: var(--color-border-badge-secondary); }
+
+.border-color-badge-danger { border-color: var(--color-border-badge-danger); }
+
+.hover\:border-color-badge-danger:hover { border-color: var(--color-border-badge-danger); }
+
+.focus\:border-color-badge-danger:focus { border-color: var(--color-border-badge-danger); }
+
+.border-color-badge-outline { border-color: var(--color-border-badge-outline); }
+
+.hover\:border-color-badge-outline:hover { border-color: var(--color-border-badge-outline); }
+
+.focus\:border-color-badge-outline:focus { border-color: var(--color-border-badge-outline); }
+
 .border-color-sidebar-rail-hover { border-color: var(--color-border-sidebar-rail-hover); }
 
 .hover\:border-color-sidebar-rail-hover:hover { border-color: var(--color-border-sidebar-rail-hover); }
@@ -780,6 +828,30 @@
 
 .focus\:font-color-button-danger-active:focus { color: var(--color-font-button-danger-active); }
 
+.font-color-badge-default { color: var(--color-font-badge-default); }
+
+.hover\:font-color-badge-default:hover { color: var(--color-font-badge-default); }
+
+.focus\:font-color-badge-default:focus { color: var(--color-font-badge-default); }
+
+.font-color-badge-secondary { color: var(--color-font-badge-secondary); }
+
+.hover\:font-color-badge-secondary:hover { color: var(--color-font-badge-secondary); }
+
+.focus\:font-color-badge-secondary:focus { color: var(--color-font-badge-secondary); }
+
+.font-color-badge-danger { color: var(--color-font-badge-danger); }
+
+.hover\:font-color-badge-danger:hover { color: var(--color-font-badge-danger); }
+
+.focus\:font-color-badge-danger:focus { color: var(--color-font-badge-danger); }
+
+.font-color-badge-outline { color: var(--color-font-badge-outline); }
+
+.hover\:font-color-badge-outline:hover { color: var(--color-font-badge-outline); }
+
+.focus\:font-color-badge-outline:focus { color: var(--color-font-badge-outline); }
+
 .font-color-toast { color: var(--color-font-toast); }
 
 .hover\:font-color-toast:hover { color: var(--color-font-toast); }

package/dist/css/variables.css

@@ -3,7 +3,7 @@
   \*********************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Mon, 16 Mar 2026 23:37:02 GMT
+ * Generated on Mon, 06 Apr 2026 19:32:43 GMT
  */
 
 :root {
@@ -33,6 +33,10 @@
   --color-background-button-danger: #ef4444;
   --color-background-button-danger-hover: #dc2626;
   --color-background-button-danger-active: #b91c1c;
+  --color-background-badge-default: #171717;
+  --color-background-badge-secondary: #e5e5e5;
+  --color-background-badge-danger: #fef2f2;
+  --color-background-badge-outline: rgba(0, 0, 0, 0);
   --color-background-toggle-group-item-hover: rgba(0, 0, 0, 0.1);
   --color-background-toggle-group-item-active: rgba(0, 0, 0, 0.1);
   --color-background-scrollbar-thumb: #d4d4d4;
@@ -146,6 +150,10 @@
   --color-border-button-tertiary: rgba(0, 0, 0, 0);
   --color-border-button-tertiary-hover: rgba(0, 0, 0, 0);
   --color-border-button-tertiary-active: rgba(0, 0, 0, 0);
+  --color-border-badge-default: #171717;
+  --color-border-badge-secondary: #e5e5e5;
+  --color-border-badge-danger: #fee2e2;
+  --color-border-badge-outline: #d4d4d4;
   --color-border-sidebar-rail-hover: #d4d4d4;
   --color-border-toast: #171717;
   --color-border-toast-error: #dc2626;
@@ -201,6 +209,10 @@
   --color-font-button-danger: #ffffff;
   --color-font-button-danger-hover: #ffffff;
   --color-font-button-danger-active: #ffffff;
+  --color-font-badge-default: #ffffff;
+  --color-font-badge-secondary: #262626;
+  --color-font-badge-danger: #dc2626;
+  --color-font-badge-outline: #262626;
   --color-font-toast: #f5f5f5;
   --color-font-toast-error: #ffffff;
   --color-font-tooltip: #f5f5f5;
@@ -370,7 +382,7 @@
   \*******************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Mon, 16 Mar 2026 23:37:02 GMT
+ * Generated on Mon, 06 Apr 2026 19:32:43 GMT
  */
 
 :root.dark {
@@ -397,6 +409,10 @@
   --color-background-button-danger: #ef4444;
   --color-background-button-danger-hover: #dc2626;
   --color-background-button-danger-active: #b91c1c;
+  --color-background-badge-default: #ffffff;
+  --color-background-badge-secondary: #404040;
+  --color-background-badge-danger: #7f1d1d;
+  --color-background-badge-outline: transparent;
   --color-background-toggle-group-item-hover: rgba(255, 255, 255, .1);
   --color-background-toggle-group-item-active: rgba(255, 255, 255, .1);
   --color-background-scrollbar-thumb: #525252;
@@ -425,6 +441,10 @@
   --color-border-button-tertiary: transparent;
   --color-border-button-tertiary-hover: transparent;
   --color-border-button-tertiary-active: transparent;
+  --color-border-badge-default: #ffffff;
+  --color-border-badge-secondary: #262626;
+  --color-border-badge-danger: #991b1b;
+  --color-border-badge-outline: #404040;
   --color-border-sidebar-rail-hover: #737373;
   --color-border-toast: #e5e5e5;
   --color-border-checkbox: #737373;
@@ -449,6 +469,10 @@
   --color-font-button-tertiary: #ffffff;
   --color-font-button-tertiary-hover: #ffffff;
   --color-font-button-tertiary-active: #ffffff;
+  --color-font-badge-default: #171717;
+  --color-font-badge-secondary: #e5e5e5;
+  --color-font-badge-danger: #f87171;
+  --color-font-badge-outline: #e5e5e5;
   --color-font-toast: #404040;
   --color-font-tooltip: #404040;
   --color-font-popover: #f5f5f5;

package/dist/hyphen-components.cjs.development.js

@@ -847,14 +847,14 @@ var import_react5 = __toESM(require("react"));
 var import_classnames4 = __toESM(require("classnames"));
 
 // src/components/Badge/Badge.module.scss
-var Badge_module_default = { "badge": "badge__wbyII", "size-sm": "size-sm__v5iQ5", "size-md": "size-md__t0Qz1", "size-lg": "size-lg__HQPfE", "inverse": "inverse__gQfNV", "purple": "purple__81ewe", "green": "green__ZMiGE", "red": "red__XGDtA", "blue": "blue__2kZV5", "yellow": "yellow__BQ41f", "light-grey": "light-grey__sXLPP", "dark-grey": "dark-grey__OKyFH", "orange": "orange__6Hwzb", "hyphen": "hyphen__nvWRN", "size-sm-tablet": "size-sm-tablet__IkjZY", "size-md-tablet": "size-md-tablet__kMUva", "size-lg-tablet": "size-lg-tablet__ldE4r", "size-sm-desktop": "size-sm-desktop__alYyy", "size-md-desktop": "size-md-desktop__AvaSK", "size-lg-desktop": "size-lg-desktop__5graA", "size-sm-hd": "size-sm-hd__74Pms", "size-md-hd": "size-md-hd__cEiUq", "size-lg-hd": "size-lg-hd__Qi3ic" };
+var Badge_module_default = { "badge": "badge__wbyII", "size-sm": "size-sm__v5iQ5", "size-md": "size-md__t0Qz1", "size-lg": "size-lg__HQPfE", "inverse": "inverse__gQfNV", "default": "default__DFAbi", "secondary": "secondary__ZPoaQ", "danger": "danger__ImdGy", "outline": "outline__jrc2I", "purple": "purple__81ewe", "green": "green__ZMiGE", "red": "red__XGDtA", "blue": "blue__2kZV5", "yellow": "yellow__BQ41f", "light-grey": "light-grey__sXLPP", "dark-grey": "dark-grey__OKyFH", "orange": "orange__6Hwzb", "hyphen": "hyphen__nvWRN", "size-sm-tablet": "size-sm-tablet__IkjZY", "size-md-tablet": "size-md-tablet__kMUva", "size-lg-tablet": "size-lg-tablet__ldE4r", "size-sm-desktop": "size-sm-desktop__alYyy", "size-md-desktop": "size-md-desktop__AvaSK", "size-lg-desktop": "size-lg-desktop__5graA", "size-sm-hd": "size-sm-hd__74Pms", "size-md-hd": "size-md-hd__cEiUq", "size-lg-hd": "size-lg-hd__Qi3ic" };
 
 // src/components/Badge/Badge.tsx
 var Badge = (0, import_react5.forwardRef)(
   ({
     className = "",
     message = "",
-    variant = "light-grey",
+    variant = "default",
     size = "md",
     children,
     ...restProps