fix: input in card becomes invisible on hover and make date-input and…

… time-input consistent
nextui-org · Dec 18, 2024 · 6a81dfc · 6a81dfc
1 parent e15ef62
commit 6a81dfc
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 19 deletions.
diff --git a/.changeset/late-doors-rhyme.md b/.changeset/late-doors-rhyme.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+Fixing the input in card to not become invisible on hover and making time-input and date-input consistent to other inputs.
diff --git a/packages/core/theme/src/components/date-input.ts b/packages/core/theme/src/components/date-input.ts
@@ -227,7 +227,7 @@ const dateInput = tv({
       color: "primary",
       class: {
         innerWrapper: "text-primary",
-        inputWrapper: ["bg-primary-50", "hover:bg-primary-100", "focus-within:bg-primary-50"],
+        inputWrapper: ["bg-primary-100", "hover:bg-primary-50", "focus-within:bg-primary-50"],
         segment:
           "text-primary-300 data-[editable=true]:data-[placeholder=true]:text-primary-300 data-[editable=true]:text-primary",
         label: "text-primary",
@@ -238,7 +238,7 @@ const dateInput = tv({
       color: "secondary",
       class: {
         innerWrapper: "text-secondary",
-        inputWrapper: ["bg-secondary-50", "hover:bg-secondary-100", "focus-within:bg-secondary-50"],
+        inputWrapper: ["bg-secondary-100", "hover:bg-secondary-50", "focus-within:bg-secondary-50"],
         segment:
           "text-secondary-300 data-[editable=true]:data-[placeholder=true]:text-secondary-300 data-[editable=true]:text-secondary",
         label: "text-secondary",
@@ -249,7 +249,7 @@ const dateInput = tv({
       color: "success",
       class: {
         innerWrapper: "text-success-600 dark:text-success",
-        inputWrapper: ["bg-success-50", "hover:bg-success-100", "focus-within:bg-success-50"],
+        inputWrapper: ["bg-success-100", "hover:bg-success-50", "focus-within:bg-success-50"],
         segment:
           "text-success-400 data-[editable=true]:data-[placeholder=true]:text-success-400 data-[editable=true]:text-success-600 data-[editable=true]:focus:text-success-600",
         label: "text-success-600 dark:text-success",
@@ -260,7 +260,7 @@ const dateInput = tv({
       color: "warning",
       class: {
         innerWrapper: "text-warning-600 dark:text-warning",
-        inputWrapper: ["bg-warning-50", "hover:bg-warning-100", "focus-within:bg-warning-50"],
+        inputWrapper: ["bg-warning-100", "hover:bg-warning-50", "focus-within:bg-warning-50"],
         segment:
           "text-warning-400 data-[editable=true]:data-[placeholder=true]:text-warning-400 data-[editable=true]:text-warning-600 data-[editable=true]:focus:text-warning-600",
         label: "text-warning-600 dark:text-warning",
@@ -271,15 +271,81 @@ const dateInput = tv({
       color: "danger",
       class: {
         innerWrapper: "text-danger",
-        inputWrapper: ["bg-danger-50", "hover:bg-danger-100", "focus-within:bg-danger-50"],
+        inputWrapper: ["bg-danger-100", "hover:bg-danger-50", "focus-within:bg-danger-50"],
         segment:
           "text-danger-300 data-[editable=true]:data-[placeholder=true]:text-danger-300 data-[editable=true]:text-danger",
         label: "text-danger",
       },
     },
+    // faded & color
+    {
+      variant: "faded",
+      color: "primary",
+      class: {
+        innerWrapper: "text-primary",
+        inputWrapper: [
+          "hover:border-primary",
+          "focus-within:border-primary",
+          "focus-within:hover:border-primary",
+        ],
+        label: "text-primary",
+      },
+    },
+    {
+      variant: "faded",
+      color: "secondary",
+      class: {
+        innerWrapper: "text-secondary",
+        inputWrapper: [
+          "hover:border-secondary",
+          "focus-within:border-secondary",
+          "focus-within:hover:border-secondary",
+        ],
+        label: "text-secondary",
+      },
+    },
+    {
+      variant: "faded",
+      color: "success",
+      class: {
+        innerWrapper: "text-success",
+        inputWrapper: [
+          "hover:border-success",
+          "focus-within:border-success",
+          "focus-within:hover:border-success",
+        ],
+        label: "text-success",
+      },
+    },
+    {
+      variant: "faded",
+      color: "warning",
+      class: {
+        innerWrapper: "text-warning",
+        inputWrapper: [
+          "hover:border-warning",
+          "focus-within:border-warning",
+          "focus-within:hover:border-warning",
+        ],
+        label: "text-warning",
+      },
+    },
+    {
+      variant: "faded",
+      color: "danger",
+      class: {
+        innerWrapper: "text-danger",
+        inputWrapper: [
+          "hover:border-danger",
+          "focus-within:border-danger",
+          "focus-within:hover:border-danger",
+        ],
+        label: "text-danger",
+      },
+    },
     // bordered & color
     {
-      variant: ["bordered", "faded"],
+      variant: "bordered",
       color: "primary",
       class: {
         innerWrapper: "text-primary",
@@ -288,7 +354,7 @@ const dateInput = tv({
       },
     },
     {
-      variant: ["bordered", "faded"],
+      variant: "bordered",
       color: "secondary",
       class: {
         innerWrapper: "text-secondary",
@@ -297,7 +363,7 @@ const dateInput = tv({
       },
     },
     {
-      variant: ["bordered", "faded"],
+      variant: "bordered",
       color: "success",
       class: {
         innerWrapper: "text-success",
@@ -306,7 +372,7 @@ const dateInput = tv({
       },
     },
     {
-      variant: ["bordered", "faded"],
+      variant: "bordered",
       color: "warning",
       class: {
         innerWrapper: "text-warning",
@@ -315,7 +381,7 @@ const dateInput = tv({
       },
     },
     {
-      variant: ["bordered", "faded"],
+      variant: "bordered",
       color: "danger",
       class: {
         innerWrapper: "text-danger",

diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts
@@ -76,7 +76,7 @@ const input = tv({
       flat: {
         inputWrapper: [
           "bg-default-100",
-          "data-[hover=true]:bg-default-50",
+          "data-[hover=true]:bg-default-200",
           "group-data-[focus=true]:bg-default-100",
         ],
       },

diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts
@@ -38,8 +38,8 @@ const select = tv({
       flat: {
         trigger: [
           "bg-default-100",
-          "data-[hover=true]:bg-default-50",
-          "group-data-[focus=true]:bg-default-50",
+          "data-[hover=true]:bg-default-200",
+          "group-data-[focus=true]:bg-default-200",
         ],
       },
       faded: {
@@ -90,11 +90,21 @@ const select = tv({
     },
     color: {
       default: {},
-      primary: {},
-      secondary: {},
-      success: {},
-      warning: {},
-      danger: {},
+      primary: {
+        selectorIcon: "text-primary",
+      },
+      secondary: {
+        selectorIcon: "text-secondary",
+      },
+      success: {
+        selectorIcon: "text-success",
+      },
+      warning: {
+        selectorIcon: "text-warning",
+      },
+      danger: {
+        selectorIcon: "text-danger",
+      },
     },
     size: {
       sm: {
@@ -222,7 +232,7 @@ const select = tv({
       color: "default",
       class: {
         value: "group-data-[has-value=true]:text-default-foreground",
-        trigger: ["bg-default-100", "data-[hover=true]:bg-default-50"],
+        trigger: ["bg-default-100", "data-[hover=true]:bg-default-200"],
       },
     },
     {