@hyphen/hyphen-components 5.7.0 → 5.7.2

package/dist/lib/tokens.d.ts

@@ -7,8 +7,8 @@ export declare const BREAKPOINTS: Breakpoint[];
 export declare const BASE_COLOR_OPTIONS: ("black" | "white" | "magenta" | "primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "green-50" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "green-900" | "blue-50" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "blue-900" | "purple-50" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "yellow-50" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "yellow-900" | "red-50" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900")[];
 export declare const BASE_COLOR_NAMES: ("black" | "white" | "magenta" | "primary" | "green" | "blue" | "purple" | "yellow" | "red" | "grey")[];
 export declare const FONT_COLOR_OPTIONS: ("info" | "base" | "black" | "white" | "grey" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "success-disabled" | "warn" | "warn-disabled" | "danger" | "danger-input" | "danger-disabled" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "tooltip" | "placeholder" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple")[];
-export declare const BACKGROUND_COLOR_OPTIONS: ("info" | "black" | "white" | "primary" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "tooltip" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "error" | "warning" | "transparent" | "toggle-group-item-hover" | "toggle-group-item-active" | "scrollbar-thumb" | "scrollbar-track" | "modal" | "slider" | "brand-gradient" | "brand-gradient-reverse" | "brand-gradient-purple" | "brand-gradient-purple-reverse" | "brand-gradient-cyan" | "brand-gradient-cyan-reverse" | "chart-1" | "chart-2" | "chart-3")[];
-export declare const BORDER_COLOR_OPTIONS: ("info" | "black" | "white" | "inverse" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "toast" | "toast-error" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "warning" | "transparent" | "default" | "subtle" | "hover" | "active" | "sidebar-rail-hover")[];
+export declare const BACKGROUND_COLOR_OPTIONS: ("info" | "black" | "white" | "primary" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "tooltip" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "error" | "warning" | "transparent" | "toggle-group-item-hover" | "toggle-group-item-active" | "scrollbar-thumb" | "scrollbar-track" | "modal" | "slider" | "checkbox-checked" | "brand-gradient" | "brand-gradient-reverse" | "brand-gradient-purple" | "brand-gradient-purple-reverse" | "brand-gradient-cyan" | "brand-gradient-cyan-reverse" | "chart-1" | "chart-2" | "chart-3")[];
+export declare const BORDER_COLOR_OPTIONS: ("info" | "black" | "white" | "inverse" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "toast" | "toast-error" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "warning" | "transparent" | "default" | "subtle" | "hover" | "active" | "sidebar-rail-hover" | "checkbox")[];
 export declare const FONT_SIZE_OPTIONS: ("xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "form-label" | "form-help-text")[];
 export declare const FONT_FAMILY_OPTIONS: ("monospace" | "body" | "brand")[];
 export declare const FONT_WEIGHT_OPTIONS: ("form-label" | "form-help-text" | "light" | "normal" | "medium" | "semibold" | "bold")[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "5.7.0",
+  "version": "5.7.2",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -48,7 +48,7 @@
     "react": ">=16"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=20"
   },
   "size-limit": [
     {
@@ -62,7 +62,7 @@
   ],
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@hyphen/hyphen-design-tokens": "^4.39.0",
+    "@hyphen/hyphen-design-tokens": "^4.39.1",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-dropdown-menu": "^2.1.15",

package/src/components/Alert/Alert.module.scss

@@ -10,7 +10,7 @@
       background: none;
       cursor: pointer;
       padding: 0;
-      color: inherit;
+      color: var(--color-base-grey-600);
       font: inherit;
 
       &:hover {

package/src/components/Alert/Alert.tsx

@@ -103,6 +103,7 @@ export const Alert: FC<AlertProps> = ({
           type="button"
           onClick={handleClose}
           onKeyUp={handleCloseKeyPress}
+          aria-label="dismiss"
         >
           {closeText || (
             <Icon name="remove" data-testid="alert-close-icon-test-id" />

package/src/components/Button/Button.stories.tsx

@@ -94,11 +94,13 @@ export const IconButton = () => (
 
 export const Loading = () => (
   <Box direction="row" gap="md">
-    <Button isLoading>Primary Loading</Button>
-    <Button variant="secondary" isLoading>
+    <Button isLoading aria-label="primary loading">
+      Primary Loading
+    </Button>
+    <Button variant="secondary" isLoading aria-label="secondary loading">
       Secondary Loading
     </Button>
-    <Button variant="tertiary" isLoading>
+    <Button variant="tertiary" isLoading aria-label="tertiary loading">
       Tertiary Loading
     </Button>
   </Box>

package/src/components/CheckboxInput/CheckboxInput.stories.tsx

@@ -40,13 +40,13 @@ export const States = () => (
       isChecked={false}
     />
     <CheckboxInput
-      id="statesCHecked"
+      id="statesChecked"
       label="Checked"
       onChange={() => {}}
       isChecked={true}
     />
     <CheckboxInput
-      id="statesUnchecked"
+      id="statesIndeterminate"
       label="Indeterminate"
       onChange={() => {}}
       isChecked={true}
@@ -69,7 +69,7 @@ export const IndeterminateCheckboxes = () => {
       </Box>
       <Box gap="sm">
         <CheckboxInput
-          id="statesUnchecked"
+          id="intdeterminateParent"
           label="Parent"
           onChange={handleParentChange}
           isChecked={exampleOneChildOne || exampleOneChildTwo}
@@ -77,13 +77,13 @@ export const IndeterminateCheckboxes = () => {
         />
         <Box padding="0 0 0 sm" gap="sm">
           <CheckboxInput
-            id="statesUnchecked"
+            id="indeterminateChildOne"
             label="Child One"
             onChange={(event) => setExampleOneChildOne(event.target.checked)}
             isChecked={exampleOneChildOne}
           />
           <CheckboxInput
-            id="statesUnchecked"
+            id="indeterminateChildTwo"
             label="Child Two"
             onChange={(event) => setExampleOneChildTwo(event.target.checked)}
             isChecked={exampleOneChildTwo}

package/src/components/CheckboxInput/components/Checkbox.module.scss

@@ -67,15 +67,18 @@ $lg-dimension: 36px;
   }
 
   input + div {
-    background: var(--form-control-background-color, var(--color-base-white));
-    color: var(--form-control-checkbox-color, var(--color-base-grey-500));
+    background: var(
+      --form-control-background-color,
+      var(--color-background-primary)
+    );
+    color: var(--form-control-checkbox-color, var(--color-border-checkbox));
   }
 
   input:checked + div,
   input:indeterminate + div {
     color: var(
       --form-control-checkbox-color-checked,
-      var(--color-base-primary-500)
+      var(--color-background-checkbox-checked)
     );
   }