index.js•2.75 kB
export default {
root: {
class: [
// Shape
'rounded-md',
// Size
'min-w-[12rem]',
'p-1.5',
// Colors
'bg-surface-0 dark:bg-surface-700',
'ring-1 ring-surface-200 dark:ring-surface-700'
]
},
menu: {
class: [
// Spacings and Shape
'list-none',
'm-0',
'p-0',
'outline-none'
]
},
menuitem: {
class: ['relative first:mt-0 mt-1']
},
content: ({ context }) => ({
class: [
//Shape
'rounded-md',
// Colors
{
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-black/70': context.focused && !context.active,
'text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70': context.focused && context.active,
'text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70': !context.focused && context.active
},
// Hover States
{
'hover:bg-surface-50 dark:hover:bg-surface-800': !context.active,
'hover:bg-surface-100 dark:hover:bg-black/40 text-surface-900 dark:text-surface-0/80': context.active
},
// Transitions
'transition-shadow',
'duration-200'
]
}),
action: {
class: [
'relative',
// Font
'font-semibold',
// Flexbox
'flex',
'items-center',
// Spacing
'py-2',
'px-3',
// Misc
'no-underline',
'overflow-hidden',
'cursor-pointer',
'select-none'
]
},
icon: {
class: [
// Spacing
'mr-2',
'leading-6',
'text-sm'
]
},
label: {
class: ['leading-none', 'text-sm']
},
submenuicon: {
class: [
// Position
'ml-auto'
]
},
submenu: {
class: [
// Size
'w-full sm:w-48',
// Spacing
'p-1.5',
'm-0 mx-1.5',
'list-none',
// Shape
'shadow-none sm:shadow-md',
'border-0',
// Position
'static sm:absolute',
'z-10',
// Color
'bg-surface-0 dark:bg-surface-700'
]
},
separator: {
class: 'border-t border-surface-200 dark:border-surface-600 my-1'
}
};