@hyphen/hyphen-components 2.9.4 → 2.9.6

package/dist/lib/tokens.d.ts

@@ -6,7 +6,7 @@ export declare const BREAKPOINT_OPTIONS: BreakpointSizeWithBase[];
 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" | "white" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "success-disabled" | "warn" | "warn-disabled" | "danger" | "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" | "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 FONT_COLOR_OPTIONS: ("info" | "base" | "white" | "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" | "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" | "primary" | "secondary" | "tertiary" | "inverse" | "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" | "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" | "brand-gradient" | "brand-gradient-purple" | "brand-gradient-cyan")[];
 export declare const BORDER_COLOR_OPTIONS: ("info" | "inverse" | "danger" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "warning" | "default" | "subtle" | "hover" | "active")[];
 export declare const FONT_SIZE_OPTIONS: ("xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl")[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "2.9.4",
+  "version": "2.9.6",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -120,7 +120,7 @@
     "@rollup/rollup-linux-x64-gnu": "^4.9.6"
   },
   "dependencies": {
-    "@hyphen/hyphen-design-tokens": "^4.4.2",
+    "@hyphen/hyphen-design-tokens": "^4.4.3",
     "@popperjs/core": "^2.11.8",
     "@types/react-modal": "^3.16.3",
     "classnames": "^2.5.1",

package/src/components/DateInput/DateInput.tsx

@@ -146,7 +146,7 @@ export const DateInput: FC<DateInputProps> = ({
   const handleOnClickOutside = (event: MouseEvent | KeyboardEvent) => {
     const target = event.target as Element;
 
-    if (target.className.includes('react-datepicker__navigation')) {
+    if (target.classList.contains('react-datepicker__navigation')) {
       return;
     }
 

package/src/components/SelectInputInset/SelectInputInset.module.scss

@@ -328,11 +328,32 @@
         --form-control-background-color,
         var(--INTERNAL_form-control-background-color)
       );
+      color: var(
+        --form-control-font-color,
+        var(--INTERNAL_form-control-font-color)
+      );
     }
 
+    select, label {
+      color: var(
+        --form-control-font-color,
+        var(--INTERNAL_form-control-input-color-error)
+      );
+    }
     select:focus {
       outline: none;
       background-color: transparent;
+      color: var(
+        --form-control-font-color,
+        var(--INTERNAL_form-control-label-color)
+      );
+      + label {
+        color: var(
+          --form-control-font-color,
+          var(--INTERNAL_form-control-label-color)
+        );
+
+      }
     }
   }
 

package/src/components/SelectInputNative/SelectInputNative.module.scss

@@ -337,13 +337,32 @@
       var(--INTERNAL_form-control-background-color-error)
     );
 
-    select:focus {
+    &:focus-within {
       outline: none;
-      border-color: var(
-        --form-control-border-color-focus,
-        var(--INTERNAL_form-control-border-color-focus)
+      border: 1px solid var(--color-border-active);
+      background-color: var(
+        --form-control-background-color,
+        var(--INTERNAL_form-control-background-color)
       );
-      background-color: transparent;
+      color: var(
+        --form-control-font-color,
+        var(--INTERNAL_form-control-font-color)
+      );
+    }
+
+    select {
+      color: var(
+        --form-control-font-color,
+        var(--INTERNAL_form-control-input-color-error)
+      );
+      &:focus {
+        outline: none;
+        background-color: transparent;
+        color: var(
+          --form-control-font-color,
+          var(--INTERNAL_form-control-label-color)
+        );
+      }
     }
   }
 }

package/src/components/TextInput/TextInput.module.scss

@@ -338,9 +338,20 @@
       );
     }
 
+    input {
+      color: var(
+        --form-control-font-color,
+        var(--INTERNAL_form-control-input-color-error)
+      );
+    }
+
     input:focus {
       outline: none;
       background-color: transparent;
+      color: var(
+        --form-control-font-color,
+        var(--INTERNAL_form-control-font-color)
+      );
     }
   }
 

package/src/components/TextInputInset/TextInputInset.module.scss

@@ -358,10 +358,28 @@
       );
     }
 
+    input, label {
+      color: var(
+        --form-control-font-color,
+        var(--INTERNAL_form-control-input-color-error)
+      );
+    }
+
     input:focus {
       outline: none;
       background-color: transparent;
+      color: var(
+        --form-control-font-color,
+        var(--INTERNAL_form-control-font-color)
+      );
+      + .text-input-label {
+        color: var(
+          --form-control-font-color,
+          var(--INTERNAL_form-control-label-color)
+        );
+      }
     }
+
   }
 
   //Necessary so that inset shadow that we use for border does not get covered by child elements.

package/src/components/TextareaInput/TextareaInput.module.scss

@@ -222,6 +222,10 @@
         --form-control-border-color-focus,
         var(--INTERNAL_form-control-background-color-error)
       );
+      color: var(
+        --form-control-font-color,
+        var(--INTERNAL_form-control-input-color-error)
+      );
     }
 
     textarea:focus {
@@ -238,6 +242,12 @@
         --form-control-border-color-focus,
         var(--INTERNAL_form-control-border-color-focus)
       );
+      > textarea {
+        color: var(
+          --form-control-font-color,
+          var(--INTERNAL_form-control-font-color)
+        );
+      }
     }
   }
 

package/src/components/TextareaInputInset/TextareaInputInset.module.scss

@@ -288,6 +288,22 @@
       --form-control-background-color-error,
       var(--INTERNAL_form-control-background-color-error)
     );
+    color: var(
+      --form-control-font-color,
+      var(--INTERNAL_form-control-input-color-error)
+    );
+
+    &:focus {
+      outline: none;
+      background-color: transparent;
+    }
+
+    + label {
+      color: var(
+        --form-control-font-color,
+        var(--INTERNAL_form-control-input-color-error)
+      );
+    }
 
     &:focus-within {
       outline: none;
@@ -296,6 +312,20 @@
         --form-control-box-shadow-focus,
         var(--INTERNAL_form-control-box-shadow-focus)
       );
+      background-color: var(
+        --form-control-background-color,
+        var(--INTERNAL_form-control-background-color)
+      );
+      color: var(
+        --form-control-font-color,
+        var(--INTERNAL_form-control-font-color)
+      );
+     + label {
+       color: var(
+         --form-control-font-color,
+         var(--INTERNAL_form-control-label-color)
+       );
+     }
     }
   }
 

package/src/styles/variables/forms.scss

@@ -44,6 +44,7 @@
   --INTERNAL_form-control-font-color: var(--color-font-base);
   --INTERNAL_form-control-font-color-disabled: var(--color-font-disabled);
   --INTERNAL_form-control-font-color-error: var(--color-font-danger);
+  --INTERNAL_form-control-input-color-error: var(--color-font-danger-input);
   --INTERNAL_form-control-font-color-error-disabled: var(
     --color-font-danger-disabled
   );