From 6a81dfcb458b1f4fbadc9e629f0fa22427bc1f52 Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Wed, 18 Dec 2024 15:35:16 +0530 Subject: [PATCH] fix: input in card becomes invisible on hover and make date-input and time-input consistent --- .changeset/late-doors-rhyme.md | 5 ++ .../core/theme/src/components/date-input.ts | 86 ++++++++++++++++--- packages/core/theme/src/components/input.ts | 2 +- packages/core/theme/src/components/select.ts | 26 ++++-- 4 files changed, 100 insertions(+), 19 deletions(-) create mode 100644 .changeset/late-doors-rhyme.md diff --git a/.changeset/late-doors-rhyme.md b/.changeset/late-doors-rhyme.md new file mode 100644 index 0000000000..1588c6a78a --- /dev/null +++ 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 index 4334d08d48..a1923a1276 100644 --- 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 index 5cb6ef14a5..53466ea08f 100644 --- 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 index 67c216126e..32d20ff1dd 100644 --- 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"], }, }, {