From 40b549e7ff1d9d116a13e2f345697e1e59bae2d1 Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Wed, 6 Nov 2024 02:00:04 +0530 Subject: [PATCH] fix(theme): making select and input themes consistent --- .changeset/twelve-trains-smile.md | 5 ++++ packages/core/theme/src/components/input.ts | 24 ++++++++++---------- packages/core/theme/src/components/select.ts | 23 +++++++++++-------- 3 files changed, 30 insertions(+), 22 deletions(-) create mode 100644 .changeset/twelve-trains-smile.md diff --git a/.changeset/twelve-trains-smile.md b/.changeset/twelve-trains-smile.md new file mode 100644 index 0000000000..68359994dc --- /dev/null +++ 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 index bc53279f34..975da764a8 100644 --- 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 index b3fb5fb34b..bb70b7691f 100644 --- 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,7 +303,8 @@ 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", }, }, @@ -313,7 +312,8 @@ const select = tv({ 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", }, }, @@ -321,7 +321,8 @@ const select = tv({ 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", }, }, @@ -329,7 +330,8 @@ const select = tv({ 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", }, }, @@ -337,7 +339,8 @@ const select = tv({ 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", }, },