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

feat: add transition-colors on hover effects

Browse Source
This commit is contained in:
Benjamin Canac
2024-05-16 13:09:47 +02:00
parent 2e174c7d20
commit 633a39452a
24 changed files with 1422 additions and 1423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/theme/breadcrumb.ts
View File

@@ -33,7 +33,7 @@ export default {
active: false,
to: true,
class: {
item: 'hover:text-gray-900 dark:hover:text-white'
item: 'hover:text-gray-900 dark:hover:text-white transition-colors'
}
}]
}

2
src/theme/button.ts
View File

@@ -2,7 +2,7 @@ import { buttonGroupVariant } from './button-group'
export default (config: { colors: string[] }) => ({
slots: {
base: 'rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
base: 'rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors',
label: '',
leadingIcon: 'shrink-0',
leadingAvatar: 'shrink-0',

4
src/theme/command-palette.ts
View File

@@ -8,8 +8,8 @@ export default {
group: 'p-1 isolate',
empty: 'py-6 text-center text-sm',
label: 'p-1.5 text-xs font-semibold text-gray-900 dark:text-white',
item: 'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50',
itemLeadingIcon: 'shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200',
item: 'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors',
itemLeadingIcon: 'shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors',
itemLeadingAvatar: 'shrink-0',
itemLeadingChip: 'shrink-0 mx-1.5',
itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',

4
src/theme/context-menu.ts
View File

@@ -19,8 +19,8 @@ export default {
itemLeadingIcon: 'text-gray-700 dark:text-gray-200'
},
false: {
item: 'text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50',
itemLeadingIcon: 'text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200'
item: 'text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors',
itemLeadingIcon: 'text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors'
}
}
}

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

@@ -20,8 +20,8 @@ export default {
itemLeadingIcon: 'text-gray-700 dark:text-gray-200'
},
false: {
item: 'text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50',
itemLeadingIcon: 'text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200'
item: 'text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors',
itemLeadingIcon: 'text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors'
}
}
}

4
src/theme/input-menu.ts
View File

@@ -11,8 +11,8 @@ export default (config: { colors: string[] }) => {
empty: 'py-2 text-center text-sm text-gray-500 dark:text-gray-400',
label: 'p-1.5 text-xs font-semibold text-gray-900 dark:text-white',
separator: '-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800',
item: 'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50',
itemLeadingIcon: 'shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200',
item: 'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors',
itemLeadingIcon: 'shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors',
itemLeadingAvatar: 'shrink-0',
itemLeadingChip: 'shrink-0 mx-1.5',
itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',

2
src/theme/link.ts
View File

@@ -3,7 +3,7 @@ export default {
variants: {
active: {
true: 'text-primary-500 dark:text-primary-400',
false: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
false: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors'
},
disabled: {
true: 'cursor-not-allowed opacity-75'

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

@@ -16,7 +16,7 @@ export default {
horizontal: {
root: 'w-full items-center justify-between',
list: 'flex items-center',
item: 'px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-0.5 after:mt-2 after:rounded-full'
item: 'px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-0.5 after:mt-2 after:rounded-full'
},
vertical: {
root: 'flex-col',
@@ -43,8 +43,8 @@ export default {
disabled: false,
active: false,
class: {
item: 'hover:text-gray-900 dark:hover:text-white',
itemLeadingIcon: 'group-hover:text-gray-700 dark:group-hover:text-gray-200'
item: 'hover:text-gray-900 dark:hover:text-white transition-colors',
itemLeadingIcon: 'group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors'
}
}, {
orientation: 'horizontal',
@@ -52,6 +52,12 @@ export default {
class: {
item: 'after:bg-primary-500 dark:after:bg-primary-400'
}
}, {
orientation: 'horizontal',
disabled: false,
class: {
item: 'hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 before:transition-colors'
}
}, {
orientation: 'vertical',
active: true,
@@ -61,8 +67,9 @@ export default {
}, {
orientation: 'vertical',
active: false,
disabled: false,
class: {
item: 'hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50'
item: 'hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 before:transition-colors'
}
}]
}

4
src/theme/select.ts
View File

@@ -11,8 +11,8 @@ export default (config: { colors: string[] }) => {
empty: 'py-2 text-center text-sm text-gray-500 dark:text-gray-400',
label: 'p-1.5 text-xs font-semibold text-gray-900 dark:text-white',
separator: '-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800',
item: 'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50',
itemLeadingIcon: 'shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200',
item: 'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors',
itemLeadingIcon: 'shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors',
itemLeadingAvatar: 'shrink-0',
itemLeadingChip: 'shrink-0 mx-1.5',
itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',