arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-24 00:40:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(DropdownMenu/ContextMenu): handle color field in items (#2510)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Alex
2024-11-06 01:21:01 +05:00
committed by GitHub
parent 2d52834529
commit f66c96e277
16 changed files with 214 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/theme/context-menu.ts
View File

@@ -18,6 +18,10 @@ export default (options: Required<ModuleOptions>) => ({
itemLabelExternalIcon: 'inline-block size-3 align-top text-[var(--ui-text-dimmed)]'
},
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
neutral: ''
},
active: {
true: {
item: 'text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]',
@@ -81,6 +85,21 @@ export default (options: Required<ModuleOptions>) => ({
}
}
},
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
color,
active: false,
class: {
item: `text-[var(--ui-${color})] data-highlighted:text-[var(--ui-${color})] data-highlighted:before:bg-[var(--ui-${color})]/10 data-[state=open]:before:bg-[var(--ui-${color})]/10`,
itemLeadingIcon: `text-[var(--ui-${color})]/75 group-data-highlighted:text-[var(--ui-${color})] group-data-[state=open]:text-[var(--ui-${color})]`
}
})), ...(options.theme.colors || []).map((color: string) => ({
color,
active: true,
class: {
item: `text-[var(--ui-${color})] before:bg-[var(--ui-${color})]/10`,
itemLeadingIcon: `text-[var(--ui-${color})]`
}
}))],
defaultVariants: {
size: 'md'
}

19
src/theme/dropdown-menu.ts
View File

@@ -19,6 +19,10 @@ export default (options: Required<ModuleOptions>) => ({
itemLabelExternalIcon: 'inline-block size-3 align-top text-[var(--ui-text-dimmed)]'
},
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
neutral: ''
},
active: {
true: {
item: 'text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]',
@@ -82,6 +86,21 @@ export default (options: Required<ModuleOptions>) => ({
}
}
},
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
color,
active: false,
class: {
item: `text-[var(--ui-${color})] data-highlighted:text-[var(--ui-${color})] data-highlighted:before:bg-[var(--ui-${color})]/10 data-[state=open]:before:bg-[var(--ui-${color})]/10`,
itemLeadingIcon: `text-[var(--ui-${color})]/75 group-data-highlighted:text-[var(--ui-${color})] group-data-[state=open]:text-[var(--ui-${color})]`
}
})), ...(options.theme.colors || []).map((color: string) => ({
color,
active: true,
class: {
item: `text-[var(--ui-${color})] before:bg-[var(--ui-${color})]/10`,
itemLeadingIcon: `text-[var(--ui-${color})]`
}
}))],
defaultVariants: {
size: 'md'
}