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

fix(module): stop using tailwind's shorthand arbitrary variable syntax (#2366)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2024-10-14 10:42:26 +02:00
committed by GitHub
parent ea07dffdd5
commit dcce571cda
131 changed files with 3724 additions and 3724 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/theme/navigation-menu.ts
View File

@@ -14,32 +14,32 @@ 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-[--ui-text-dimmed]',
linkLabelExternalIcon: 'size-3 align-top text-[var(--ui-text-dimmed)]',
childList: 'grid grid-cols-2 gap-2 p-2',
childItem: '',
childLink: 'group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] 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-[--ui-text-dimmed]',
childLinkDescription: 'text-sm text-[--ui-text-muted]',
separator: 'px-2 h-px bg-[--ui-border]',
childLinkLabelExternalIcon: 'size-3 align-top text-[var(--ui-text-dimmed)]',
childLinkDescription: 'text-sm text-[var(--ui-text-muted)]',
separator: 'px-2 h-px bg-[var(--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-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] 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]',
viewport: 'relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--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-[--ui-border] bg-[--ui-bg] z-[1] rounded-[calc(var(--ui-radius)/2)]'
arrow: 'relative top-[50%] size-2.5 rotate-45 border border-[var(--ui-border)] bg-[var(--ui-bg)] z-[1] rounded-[calc(var(--ui-radius)/2)]'
},
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
link: `focus-visible:before:ring-[--ui-${color}]`,
childLink: `focus-visible:outline-[--ui-${color}]`
link: `focus-visible:before:ring-[var(--ui-${color})]`,
childLink: `focus-visible:outline-[var(--ui-${color})]`
}])),
neutral: {
link: 'focus-visible:before:ring-[--ui-border-inverted]',
childLink: 'focus-visible:outline-[--ui-border-inverted]'
link: 'focus-visible:before:ring-[var(--ui-border-inverted)]',
childLink: 'focus-visible:outline-[var(--ui-border-inverted)]'
}
},
highlightColor: {
@@ -64,14 +64,14 @@ export default (options: Required<ModuleOptions>) => ({
},
active: {
true: {
childLink: 'bg-[--ui-bg-elevated] text-[--ui-text-highlighted]',
childLinkIcon: 'text-[--ui-text]'
childLink: 'bg-[var(--ui-bg-elevated)] text-[var(--ui-text-highlighted)]',
childLinkIcon: 'text-[var(--ui-text)]'
},
false: {
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']
link: 'text-[var(--ui-text-muted)]',
linkLeadingIcon: 'text-[var(--ui-text-dimmed)]',
childLink: ['hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)]', options.theme.transitions && 'transition-colors'],
childLinkIcon: ['text-[var(--ui-text-dimmed)] group-hover:text-[var(--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-[--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']
link: ['hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
linkLeadingIcon: ['group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors']
}
}, ...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'pill',
active: true,
class: {
link: `text-[--ui-${color}]`,
linkLeadingIcon: `text-[--ui-${color}]`
link: `text-[var(--ui-${color})]`,
linkLeadingIcon: `text-[var(--ui-${color})]`
}
})), {
color: 'neutral',
variant: 'pill',
active: true,
class: {
link: 'text-[--ui-text-highlighted]',
linkLeadingIcon: 'text-[--ui-text-highlighted]'
link: 'text-[var(--ui-text-highlighted)]',
linkLeadingIcon: 'text-[var(--ui-text-highlighted)]'
}
}, {
variant: 'pill',
active: true,
highlight: false,
class: {
link: 'before:bg-[--ui-bg-elevated]'
link: 'before:bg-[var(--ui-bg-elevated)]'
}
}, {
variant: 'pill',
active: true,
highlight: true,
class: {
link: ['hover:before:bg-[--ui-bg-elevated]/50', options.theme.transitions && 'before:transition-colors']
link: ['hover:before:bg-[var(--ui-bg-elevated)]/50', options.theme.transitions && 'before:transition-colors']
}
}, {
disabled: false,
active: false,
variant: 'link',
class: {
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']
link: ['hover:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)]', options.theme.transitions && 'transition-colors'],
linkLeadingIcon: ['group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors']
}
}, ...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'link',
active: true,
class: {
link: `text-[--ui-${color}]`,
linkLeadingIcon: `text-[--ui-${color}]`
link: `text-[var(--ui-${color})]`,
linkLeadingIcon: `text-[var(--ui-${color})]`
}
})), {
color: 'neutral',
variant: 'link',
active: true,
class: {
link: 'text-[--ui-text-highlighted]',
linkLeadingIcon: 'text-[--ui-text-highlighted]'
link: 'text-[var(--ui-text-highlighted)]',
linkLeadingIcon: 'text-[var(--ui-text-highlighted)]'
}
}, ...(options.theme.colors || []).map((highlightColor: string) => ({
highlightColor,
highlight: true,
active: true,
class: {
link: `after:bg-[--ui-${highlightColor}]`
link: `after:bg-[var(--ui-${highlightColor})]`
}
})), {
highlightColor: 'neutral',
highlight: true,
active: true,
class: {
link: 'after:bg-[--ui-bg-inverted]'
link: 'after:bg-[var(--ui-bg-inverted)]'
}
}],
defaultVariants: {