archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(theme): color discrepancy in select (#3663)

Browse Source 
* fix(select): resolving color descrepancy in select

* fix(select): making the changes accroding to the asked design

* chore(changeset): revise message

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>
This commit is contained in:
Maharshi Alpesh 2024-09-07 13:01:12 +05:30 committed by GitHub
parent 60cd878ee4
commit 46cc01908e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/tall-walls-sell.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/theme": patch
---
The color of the selected value in SELECT component was `text-foreground-500` instead of `text-default-foreground`. Also label slot in SELECT component's UNDERLINE had no effect of color variant. The change includes the fix for the mentioned issues (#3659).

25
packages/core/theme/src/components/select.ts
View File

@ -44,6 +44,7 @@ const select = tv({
faded: {
trigger: [
"bg-default-100",
"data-[hover=true]:bg-default-200",
"border-medium",
"border-default-200",
"data-[hover=true]:border-default-400",
@ -59,6 +60,7 @@ const select = tv({
"data-[focus=true]:border-default-foreground",
"data-[focus=true]:border-default-foreground",
],
value: "group-data-[has-value=true]:text-default-foreground",
},
underlined: {
trigger: [
@ -84,7 +86,7 @@ const select = tv({
"data-[open=true]:after:w-full",
"data-[focus=true]:after:w-full",
],
label: "group-data-[filled=true]:text-foreground",
value: "group-data-[has-value=true]:text-default-foreground",
},
},
color: {
@ -217,6 +219,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"],
},
},
{
@ -224,9 +227,9 @@ const select = tv({
color: "primary",
class: {
trigger: [
"bg-primary-50",
"bg-primary-100",
"text-primary",
"data-[hover=true]:bg-primary-100",
"data-[hover=true]:bg-primary-50",
"group-data-[focus=true]:bg-primary-50",
],
value: "text-primary",
@ -238,9 +241,9 @@ const select = tv({
color: "secondary",
class: {
trigger: [
"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",
],
value: "text-secondary",
@ -252,10 +255,10 @@ const select = tv({
color: "success",
class: {
trigger: [
"bg-success-50",
"bg-success-100",
"text-success-600",
"dark:text-success",
"data-[hover=true]:bg-success-100",
"data-[hover=true]:bg-success-50",
"group-data-[focus=true]:bg-success-50",
],
value: "text-success-600 dark:text-success",
@ -267,10 +270,10 @@ const select = tv({
color: "warning",
class: {
trigger: [
"bg-warning-50",
"bg-warning-100",
"text-warning-600",
"dark:text-warning",
"data-[hover=true]:bg-warning-100",
"data-[hover=true]:bg-warning-50",
"group-data-[focus=true]:bg-warning-50",
],
value: "text-warning-600 dark:text-warning",
@ -282,10 +285,10 @@ const select = tv({
color: "danger",
class: {
trigger: [
"bg-danger-50",
"bg-danger-100",
"text-danger",
"dark:text-danger-500",
"data-[hover=true]:bg-danger-100",
"data-[hover=true]:bg-danger-50",
"group-data-[focus=true]:bg-danger-50",
],
value: "text-danger dark:text-danger-500",