mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-24 00:40:34 +01:00
refactor(module)!: implement design system with CSS variables (#2298)
This commit is contained in:
Benjamin Canac
GitHub
@@ -14,37 +14,37 @@ export default (options: Required<ModuleOptions>) => ({
|
||||
linkTrailingBadgeSize: 'sm',
|
||||
linkTrailingIcon: 'size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
|
||||
linkLabel: 'truncate',
|
||||
linkLabelExternalIcon: 'size-3 align-top text-gray-400 dark:text-gray-500',
|
||||
linkLabelExternalIcon: 'size-3 align-top text-[--ui-text-dimmed]',
|
||||
childList: 'grid grid-cols-2 gap-2 p-2',
|
||||
childItem: '',
|
||||
childLink: 'group size-full px-3 py-2 rounded-md flex items-start gap-2 text-left',
|
||||
childLinkWrapper: 'flex flex-col items-start',
|
||||
childLinkIcon: 'size-5 shrink-0',
|
||||
childLinkLabel: 'font-semibold text-sm relative inline-flex',
|
||||
childLinkLabelExternalIcon: 'size-3 align-top text-gray-400 dark:text-gray-500',
|
||||
childLinkDescription: 'text-sm text-gray-500 dark:text-gray-400',
|
||||
separator: 'px-2 h-px bg-gray-200 dark:bg-gray-800',
|
||||
childLinkLabelExternalIcon: 'size-3 align-top text-[--ui-text-dimmed]',
|
||||
childLinkDescription: 'text-sm text-[--ui-text-muted]',
|
||||
separator: 'px-2 h-px bg-[--ui-border]',
|
||||
viewportWrapper: 'absolute top-full inset-x-0 flex w-full',
|
||||
// FIXME: add `sm:w-[var(--radix-navigation-menu-viewport-width)]` / `transition-[width,height]` / `origin-[top_center]` once position is based on trigger
|
||||
viewport: 'relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 h-[--radix-navigation-menu-viewport-height] w-full data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
|
||||
viewport: 'relative overflow-hidden bg-[--ui-bg] shadow-lg rounded-md ring ring-[--ui-border] h-[--radix-navigation-menu-viewport-height] w-full data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
|
||||
content: 'absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]',
|
||||
indicator: 'data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] bottom-0 z-[1] flex h-2.5 items-end justify-center overflow-hidden transition-transform duration-200 ease-out',
|
||||
arrow: 'relative top-[50%] size-2.5 rotate-45 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 z-[1] rounded-sm'
|
||||
arrow: 'relative top-[50%] size-2.5 rotate-45 border border-[--ui-border] bg-[--ui-bg] z-[1] rounded-sm'
|
||||
},
|
||||
variants: {
|
||||
color: {
|
||||
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
|
||||
link: `focus-visible:before:ring-${color}-500 dark:focus-visible:before:ring-${color}-400`,
|
||||
childLink: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
|
||||
link: `focus-visible:before:ring-[--ui-${color}]`,
|
||||
childLink: `focus-visible:outline-[--ui-${color}]`
|
||||
}])),
|
||||
gray: {
|
||||
link: 'focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white',
|
||||
childLink: 'focus-visible:outline-gray-900 dark:focus-visible:outline-white'
|
||||
neutral: {
|
||||
link: 'focus-visible:before:ring-[--ui-border-inverted]',
|
||||
childLink: 'focus-visible:outline-[--ui-border-inverted]'
|
||||
}
|
||||
},
|
||||
highlightColor: {
|
||||
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
|
||||
gray: ''
|
||||
neutral: ''
|
||||
},
|
||||
variant: {
|
||||
pill: '',
|
||||
@@ -64,14 +64,14 @@ export default (options: Required<ModuleOptions>) => ({
|
||||
},
|
||||
active: {
|
||||
true: {
|
||||
childLink: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white',
|
||||
childLinkIcon: 'text-gray-700 dark:text-gray-200'
|
||||
childLink: 'bg-[--ui-bg-elevated] text-[--ui-text-highlighted]',
|
||||
childLinkIcon: 'text-[--ui-text]'
|
||||
},
|
||||
false: {
|
||||
link: 'text-gray-500 dark:text-gray-400',
|
||||
linkLeadingIcon: 'text-gray-400 dark:text-gray-500',
|
||||
childLink: ['hover:bg-gray-50 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white', options.theme.transitions && 'transition-colors'],
|
||||
childLinkIcon: ['text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200', options.theme.transitions && 'transition-colors']
|
||||
link: 'text-[--ui-text-muted]',
|
||||
linkLeadingIcon: 'text-[--ui-text-dimmed]',
|
||||
childLink: ['hover:bg-[--ui-bg-elevated]/50 text-[--ui-text] hover:text-[--ui-text-highlighted]', options.theme.transitions && 'transition-colors'],
|
||||
childLinkIcon: ['text-[--ui-text-dimmed] group-hover:text-[--ui-text]', options.theme.transitions && 'transition-colors']
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
@@ -102,76 +102,76 @@ export default (options: Required<ModuleOptions>) => ({
|
||||
active: false,
|
||||
variant: 'pill',
|
||||
class: {
|
||||
link: ['hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50', options.theme.transitions && 'transition-colors before:transition-colors'],
|
||||
linkLeadingIcon: ['group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.theme.transitions && 'transition-colors']
|
||||
link: ['hover:text-[--ui-text-highlighted] hover:before:bg-[--ui-bg-elevated]/50 data-[state=open]:text-[--ui-text-highlighted] data-[state=open]:before:bg-[--ui-bg-elevated]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
|
||||
linkLeadingIcon: ['group-hover:text-[--ui-text] group-data-[state=open]:text-[--ui-text]', options.theme.transitions && 'transition-colors']
|
||||
}
|
||||
}, ...(options.theme.colors || []).map((color: string) => ({
|
||||
color,
|
||||
variant: 'pill',
|
||||
active: true,
|
||||
class: {
|
||||
link: `text-${color}-500 dark:text-${color}-400`,
|
||||
linkLeadingIcon: `text-${color}-500 dark:text-${color}-400`
|
||||
link: `text-[--ui-${color}]`,
|
||||
linkLeadingIcon: `text-[--ui-${color}]`
|
||||
}
|
||||
})), {
|
||||
color: 'gray',
|
||||
color: 'neutral',
|
||||
variant: 'pill',
|
||||
active: true,
|
||||
class: {
|
||||
link: 'text-gray-900 dark:text-white',
|
||||
linkLeadingIcon: 'text-gray-900 dark:text-white'
|
||||
link: 'text-[--ui-text-highlighted]',
|
||||
linkLeadingIcon: 'text-[--ui-text-highlighted]'
|
||||
}
|
||||
}, {
|
||||
variant: 'pill',
|
||||
active: true,
|
||||
highlight: false,
|
||||
class: {
|
||||
link: 'before:bg-gray-100 dark:before:bg-gray-800'
|
||||
link: 'before:bg-[--ui-bg-elevated]'
|
||||
}
|
||||
}, {
|
||||
variant: 'pill',
|
||||
active: true,
|
||||
highlight: true,
|
||||
class: {
|
||||
link: ['hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50', options.theme.transitions && 'before:transition-colors']
|
||||
link: ['hover:before:bg-[--ui-bg-elevated]/50', options.theme.transitions && 'before:transition-colors']
|
||||
}
|
||||
}, {
|
||||
disabled: false,
|
||||
active: false,
|
||||
variant: 'link',
|
||||
class: {
|
||||
link: ['hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white', options.theme.transitions && 'transition-colors'],
|
||||
linkLeadingIcon: ['group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.theme.transitions && 'transition-colors']
|
||||
link: ['hover:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted]', options.theme.transitions && 'transition-colors'],
|
||||
linkLeadingIcon: ['group-hover:text-[--ui-text] group-data-[state=open]:text-[--ui-text]', options.theme.transitions && 'transition-colors']
|
||||
}
|
||||
}, ...(options.theme.colors || []).map((color: string) => ({
|
||||
color,
|
||||
variant: 'link',
|
||||
active: true,
|
||||
class: {
|
||||
link: `text-${color}-500 dark:text-${color}-400`,
|
||||
linkLeadingIcon: `text-${color}-500 dark:text-${color}-400`
|
||||
link: `text-[--ui-${color}]`,
|
||||
linkLeadingIcon: `text-[--ui-${color}]`
|
||||
}
|
||||
})), {
|
||||
color: 'gray',
|
||||
color: 'neutral',
|
||||
variant: 'link',
|
||||
active: true,
|
||||
class: {
|
||||
link: 'text-gray-900 dark:text-white',
|
||||
linkLeadingIcon: 'text-gray-900 dark:text-white'
|
||||
link: 'text-[--ui-text-highlighted]',
|
||||
linkLeadingIcon: 'text-[--ui-text-highlighted]'
|
||||
}
|
||||
}, ...(options.theme.colors || []).map((highlightColor: string) => ({
|
||||
highlightColor,
|
||||
highlight: true,
|
||||
active: true,
|
||||
class: {
|
||||
link: `after:bg-${highlightColor}-500 dark:after:bg-${highlightColor}-400`
|
||||
link: `after:bg-[--ui-${highlightColor}]`
|
||||
}
|
||||
})), {
|
||||
highlightColor: 'gray',
|
||||
highlightColor: 'neutral',
|
||||
highlight: true,
|
||||
active: true,
|
||||
class: {
|
||||
link: 'after:bg-gray-900 dark:after:bg-white'
|
||||
link: 'after:bg-[--ui-bg-inverted]'
|
||||
}
|
||||
}],
|
||||
defaultVariants: {
|
||||
|
||||
Reference in New Issue
Block a user