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

feat(module): define neutral utilities (#3629)

Browse Source 
Co-authored-by: Sébastien Chopin <atinux@gmail.com>
This commit is contained in:
Benjamin Canac
2025-04-21 15:20:53 +02:00
committed by GitHub
parent 2b315fd855
commit d49e0dadee
238 changed files with 14319 additions and 14046 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,11 +2,11 @@ import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
slots: {
content: 'min-w-32 bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin)',
arrow: 'fill-(--ui-border)',
content: 'min-w-32 bg-default shadow-lg rounded-md ring ring-default divide-y divide-default overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin)',
arrow: 'fill-default',
group: 'p-1 isolate',
label: 'w-full flex items-center font-semibold text-(--ui-text-highlighted)',
separator: '-mx-1 my-1 h-px bg-(--ui-border)',
label: 'w-full flex items-center font-semibold text-highlighted',
separator: '-mx-1 my-1 h-px bg-border',
item: 'group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75',
itemLeadingIcon: 'shrink-0',
itemLeadingAvatar: 'shrink-0',
@@ -16,7 +16,7 @@ export default (options: Required<ModuleOptions>) => ({
itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0',
itemTrailingKbdsSize: '',
itemLabel: 'truncate',
itemLabelExternalIcon: 'inline-block size-3 align-top text-(--ui-text-dimmed)'
itemLabelExternalIcon: 'inline-block size-3 align-top text-dimmed'
},
variants: {
color: {
@@ -25,12 +25,12 @@ export default (options: Required<ModuleOptions>) => ({
},
active: {
true: {
item: 'text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)',
itemLeadingIcon: 'text-(--ui-text)'
item: 'text-highlighted before:bg-elevated',
itemLeadingIcon: 'text-default'
},
false: {
item: ['text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text)', options.theme.transitions && 'transition-colors']
item: ['text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default', options.theme.transitions && 'transition-colors']
}
},
loading: {
@@ -90,15 +90,15 @@ export default (options: Required<ModuleOptions>) => ({
color,
active: false,
class: {
item: `text-(--ui-${color}) data-highlighted:text-(--ui-${color}) data-highlighted:before:bg-(--ui-${color})/10 data-[state=open]:before:bg-(--ui-${color})/10`,
itemLeadingIcon: `text-(--ui-${color})/75 group-data-highlighted:text-(--ui-${color}) group-data-[state=open]:text-(--ui-${color})`
item: `text-${color} data-highlighted:text-${color} data-highlighted:before:bg-${color}/10 data-[state=open]:before:bg-${color}/10`,
itemLeadingIcon: `text-${color}/75 group-data-highlighted:text-${color} group-data-[state=open]:text-${color}`
}
})), ...(options.theme.colors || []).map((color: string) => ({
color,
active: true,
class: {
item: `text-(--ui-${color}) before:bg-(--ui-${color})/10`,
itemLeadingIcon: `text-(--ui-${color})`
item: `text-${color} before:bg-${color}/10`,
itemLeadingIcon: `text-${color}`
}
}))],
defaultVariants: {