fix(theme): making select and input themes consistent (#3881)

nextui-org · Nov 7, 2024 · 54be700 · 54be700
1 parent 2038fd6
commit 54be700
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 22 deletions.
diff --git a/.changeset/twelve-trains-smile.md b/.changeset/twelve-trains-smile.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+making input and select styling consistent(#3876)
diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts
@@ -75,7 +75,7 @@ const input = tv({
       flat: {
         inputWrapper: [
           "bg-default-100",
-          "data-[hover=true]:bg-default-200",
+          "data-[hover=true]:bg-default-50",
           "group-data-[focus=true]:bg-default-100",
         ],
       },
@@ -84,7 +84,7 @@ const input = tv({
           "bg-default-100",
           "border-medium",
           "border-default-200",
-          "data-[hover=true]:border-default-400",
+          "data-[hover=true]:border-default-400 focus-within:border-default-400",
         ],
         value: "group-data-[has-value=true]:text-default-foreground",
       },
@@ -262,8 +262,8 @@ const input = tv({
       color: "primary",
       class: {
         inputWrapper: [
-          "bg-primary-50",
-          "data-[hover=true]:bg-primary-100",
+          "bg-primary-100",
+          "data-[hover=true]:bg-primary-50",
           "text-primary",
           "group-data-[focus=true]:bg-primary-50",
           "placeholder:text-primary",
@@ -277,9 +277,9 @@ const input = tv({
       color: "secondary",
       class: {
         inputWrapper: [
-          "bg-secondary-50",
+          "bg-secondary-100",
           "text-secondary",
-          "data-[hover=true]:bg-secondary-100",
+          "data-[hover=true]:bg-secondary-50",
           "group-data-[focus=true]:bg-secondary-50",
           "placeholder:text-secondary",
         ],
@@ -292,12 +292,12 @@ const input = tv({
       color: "success",
       class: {
         inputWrapper: [
-          "bg-success-50",
+          "bg-success-100",
           "text-success-600",
           "dark:text-success",
           "placeholder:text-success-600",
           "dark:placeholder:text-success",
-          "data-[hover=true]:bg-success-100",
+          "data-[hover=true]:bg-success-50",
           "group-data-[focus=true]:bg-success-50",
         ],
         input: "placeholder:text-success-600 dark:placeholder:text-success",
@@ -309,12 +309,12 @@ const input = tv({
       color: "warning",
       class: {
         inputWrapper: [
-          "bg-warning-50",
+          "bg-warning-100",
           "text-warning-600",
           "dark:text-warning",
           "placeholder:text-warning-600",
           "dark:placeholder:text-warning",
-          "data-[hover=true]:bg-warning-100",
+          "data-[hover=true]:bg-warning-50",
           "group-data-[focus=true]:bg-warning-50",
         ],
         input: "placeholder:text-warning-600 dark:placeholder:text-warning",
@@ -326,12 +326,12 @@ const input = tv({
       color: "danger",
       class: {
         inputWrapper: [
-          "bg-danger-50",
+          "bg-danger-100",
           "text-danger",
           "dark:text-danger-500",
           "placeholder:text-danger",
           "dark:placeholder:text-danger-500",
-          "data-[hover=true]:bg-danger-100",
+          "data-[hover=true]:bg-danger-50",
           "group-data-[focus=true]:bg-danger-50",
         ],
         input: "placeholder:text-danger dark:placeholder:text-danger-500",

diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts
@@ -38,17 +38,16 @@ const select = tv({
       flat: {
         trigger: [
           "bg-default-100",
-          "data-[hover=true]:bg-default-200",
-          "group-data-[focus=true]:bg-default-100",
+          "data-[hover=true]:bg-default-50",
+          "group-data-[focus=true]:bg-default-50",
         ],
       },
       faded: {
         trigger: [
           "bg-default-100",
-          "data-[hover=true]:bg-default-200",
           "border-medium",
           "border-default-200",
-          "data-[hover=true]:border-default-400",
+          "data-[hover=true]:border-default-400 data-[focus=true]:border-default-400 data-[open=true]:border-default-400",
         ],
         value: "group-data-[has-value=true]:text-default-foreground",
       },
@@ -59,7 +58,6 @@ const select = tv({
           "data-[hover=true]:border-default-400",
           "data-[open=true]:border-default-foreground",
           "data-[focus=true]:border-default-foreground",
-          "data-[focus=true]:border-default-foreground",
         ],
         value: "group-data-[has-value=true]:text-default-foreground",
       },
@@ -305,39 +303,44 @@ const select = tv({
       variant: "faded",
       color: "primary",
       class: {
-        trigger: "data-[hover=true]:border-primary",
+        trigger:
+          "data-[hover=true]:border-primary data-[focus=true]:border-primary data-[open=true]:border-primary",
         label: "text-primary",
       },
     },
     {
       variant: "faded",
       color: "secondary",
       class: {
-        trigger: "data-[hover=true]:border-secondary",
+        trigger:
+          "data-[hover=true]:border-secondary data-[focus=true]:border-secondary data-[open=true]:border-secondary",
         label: "text-secondary",
       },
     },
     {
       variant: "faded",
       color: "success",
       class: {
-        trigger: "data-[hover=true]:border-success",
+        trigger:
+          "data-[hover=true]:border-success data-[focus=true]:border-success data-[open=true]:border-success",
         label: "text-success",
       },
     },
     {
       variant: "faded",
       color: "warning",
       class: {
-        trigger: "data-[hover=true]:border-warning",
+        trigger:
+          "data-[hover=true]:border-warning data-[focus=true]:border-warning data-[open=true]:border-warning",
         label: "text-warning",
       },
     },
     {
       variant: "faded",
       color: "danger",
       class: {
-        trigger: "data-[hover=true]:border-danger",
+        trigger:
+          "data-[hover=true]:border-danger data-[focus=true]:border-danger data-[open=true]:border-danger",
         label: "text-danger",
       },
     },