franken-ui
Version:
Franken UI is an HTML-first, open-source library of UI components based on the utility-first Tailwind CSS with UIkit 3 compatibility. The design is based on shadcn/ui ported to be framework-agnostic.
103 lines (102 loc) • 3.06 kB
TypeScript
export default function (): {
'hook-container': {
backgroundColor: null;
'@apply border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60': {};
};
'hook-nav-item': {
color: null;
textTransform: null;
'@apply text-foreground/60': {};
};
'hook-nav-item-hover': {
color: null;
'@apply text-foreground/80': {};
};
'hook-nav-item-onclick': {
color: null;
};
'hook-nav-item-active': {
color: null;
'@apply text-foreground': {};
};
'hook-item': {
color: null;
'@apply text-foreground/60': {};
};
'hook-toggle': {
color: null;
'@apply text-foreground/60': {};
};
'hook-toggle-hover': {
color: null;
'@apply text-foreground/80': {};
};
'hook-toggle-icon': {
color: null;
'@apply text-foreground/60': {};
};
'hook-toggle-icon-hover': {
color: null;
'@apply text-foreground/80': {};
};
'hook-dropdown': {
padding: null;
backgroundColor: null;
color: null;
boxShadow: null;
'@apply rounded-md border border-border bg-popover text-popover-foreground shadow-md': {};
};
'hook-dropdown-nav-item': {
color: null;
'@apply m-1 flex select-none items-center rounded-sm px-2 py-1.5 text-sm': {};
};
'hook-dropdown-nav-item-hover': {
color: null;
'@apply bg-accent text-accent-foreground': {};
};
'hook-dropdown-nav-item-active': {
color: null;
'@apply bg-secondary text-secondary-foreground': {};
};
'hook-dropdown-nav-subtitle': {};
'hook-dropdown-nav-header': {
color: null;
'@apply m-1 px-2 py-1.5': {};
};
'hook-dropdown-nav-divider': {
borderTop: string;
'@apply border-border': {};
};
'hook-misc': {
".uk-navbar-left, .uk-navbar-right, [class*='uk-navbar-center']": {
gap: null;
'@apply gap-6 md:gap-6': {};
};
'.uk-navbar-nav': {
gap: null;
'@apply gap-6 md:gap-6': {};
};
'.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle': {
minHeight: null;
fontFamily: null;
'@apply min-h-14': {};
};
'.uk-navbar-nav > li > a[aria-expanded="true"] .uk-navbar-parent-icon': {
transform: string;
};
'.uk-navbar-dropdown-nav .uk-nav-sub a': {
color: null;
'@apply ml-1 px-2 py-1.5': {};
};
'.uk-navbar-dropdown-nav .uk-nav-sub a:hover': {
color: null;
'@apply bg-accent text-accent-foreground': {};
};
'.uk-navbar-dropdown-nav .uk-nav-sub li.uk-active > a': {
color: null;
'@apply bg-secondary text-secondary-foreground': {};
};
'.uk-navbar-dropdown-large': null;
'.uk-navbar-dropdown-dropbar-large': null;
};
};