Skip to content

Commit

Permalink
Merge branch 'master' into tailwind-merge-callback
Browse files Browse the repository at this point in the history
  • Loading branch information
@melloware
melloware authored Dec 16, 2023
2 parents bae1c35 + 05a83b4 commit 9a61f19
Show file tree
Hide file tree
Showing 75 changed files with 987 additions and 457 deletions.
91 changes: 64 additions & 27 deletions components/doc/button/theming/tailwinddoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,53 @@ const Tailwind = {
button: {
root: ({ props, context }) => ({
className: classNames(
'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom h-full',
'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom',
'transition duration-200 ease-in-out',
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]', // Primary button focus
'focus:outline-none focus:outline-offset-0',
{
'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
'text-blue-600 bg-transparent border-transparent': props.link
'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
!props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
'text-blue-600 bg-transparent border-transparent focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.link
},
{
'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
'text-white bg-green-500 border border-green-500 hover:bg-green-600 hover:border-green-600': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
'text-white bg-orange-500 border border-orange-500 hover:bg-orange-600 hover:border-orange-600': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
'text-white bg-purple-500 border border-purple-500 hover:bg-purple-600 hover:border-purple-600': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
'text-white bg-red-500 border border-red-500 hover:bg-red-600 hover:border-red-600': props.severity === 'danger' && !props.text && !props.outlined && !props.plain
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(176,185,198,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(203,213,225,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'secondary',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(136,234,172,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(134,239,172,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'success',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'info',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(250,207,133,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,211,77,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'warning',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(212,170,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(216,180,254,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'help',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(247,162,162,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,165,165,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'danger'
},
{
'text-white dark:text-gray-900 bg-gray-500 dark:bg-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-600 dark:hover:bg-gray-500 hover:border-gray-600 dark:hover:border-gray-500':
props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 bg-green-500 dark:bg-green-400 border border-green-500 dark:border-green-400 hover:bg-green-600 dark:hover:bg-green-500 hover:border-green-600 dark:hover:border-green-500':
props.severity === 'success' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 dark:bg-blue-400 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 hover:border-blue-600 dark:hover:bg-blue-500 dark:hover:border-blue-500':
props.severity === 'info' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 bg-orange-500 dark:bg-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-600 dark:hover:bg-orange-500 hover:border-orange-600 dark:hover:border-orange-500':
props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 bg-purple-500 dark:bg-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-600 dark:hover:bg-purple-500 hover:border-purple-600 dark:hover:border-purple-500':
props.severity === 'help' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 bg-red-500 dark:bg-red-400 border border-red-500 dark:border-red-400 hover:bg-red-600 dark:hover:bg-red-500 hover:border-red-600 dark:hover:border-red-500':
props.severity === 'danger' && !props.text && !props.outlined && !props.plain
},
{ 'shadow-lg': props.raised },
{ 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
{
'bg-transparent border-transparent': props.text && !props.plain,
'text-blue-500 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
'text-gray-500 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
'text-green-500 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
'text-orange-500 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
'text-purple-500 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
'text-red-500 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain
'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
'text-gray-500 dark:text-grayy-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
'text-red-500 dark:text-red-400 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain
},
{ 'shadow-lg': props.raised && props.text },
{
Expand All @@ -43,28 +65,43 @@ const Tailwind = {
},
{
'bg-transparent border': props.outlined && !props.plain,
'text-blue-500 border border-blue-500 hover:bg-blue-300/20': props.outlined && (props.severity === null || props.severity === 'info') && !props.plain,
'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.outlined && props.severity === 'secondary' && !props.plain,
'text-green-500 border border-green-500 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain,
'text-orange-500 border border-orange-500 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain,
'text-purple-500 border border-purple-500 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain,
'text-red-500 border border-red-500 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain
'text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-300/20': props.outlined && (props.severity === null || props.severity === 'info') && !props.plain,
'text-gray-500 dark:text-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-300/20': props.outlined && props.severity === 'secondary' && !props.plain,
'text-green-500 dark:text-green-400 border border-green-500 dark:border-green-400 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain,
'text-orange-500 dark:text-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain,
'text-purple-500 dark:text-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain,
'text-red-500 dark:text-red-400 border border-red-500 dark:border-red-400 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain
},
{ 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' },
{ 'flex-column': props.iconPos == 'top' || props.iconPos == 'bottom' },
{ 'opacity-60 pointer-events-none cursor-default': context.disabled }
)
}),
label: ({ props }) => ({
className: classNames('flex-1', 'duration-200', 'font-bold', {
'hover:underline': props.link
})
className: classNames(
'flex-1',
'duration-200',
'font-bold',
{
'hover:underline': props.link
},
{ 'invisible w-0': props.label == null }
)
}),
icon: ({ props }) => ({
className: classNames('mx-0', {
'mr-2': props.iconPos == 'left' && props.label != null,
'ml-2': props.iconPos == 'right' && props.label != null,
'ml-2 order-1': props.iconPos == 'right' && props.label != null,
'mb-2': props.iconPos == 'top' && props.label != null,
'mt-2': props.iconPos == 'bottom' && props.label != null
'mt-2 order-2': props.iconPos == 'bottom' && props.label != null
})
}),
loadingIcon: ({ props }) => ({
className: classNames('mx-0', {
'mr-2': props.loading && props.iconPos == 'left' && props.label != null,
'ml-2 order-1': props.loading && props.iconPos == 'right' && props.label != null,
'mb-2': props.loading && props.iconPos == 'top' && props.label != null,
'mt-2 order-2': props.loading && props.iconPos == 'bottom' && props.label != null
})
}),
badge: ({ props }) => ({
Expand Down
76 changes: 21 additions & 55 deletions components/doc/calendar/theming/tailwinddoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,13 @@ export function TailwindDoc(props) {
basic: `
const TRANSITIONS = {
overlay: {
enterFromClass: 'opacity-0 scale-75',
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
leaveActiveClass: 'transition-opacity duration-150 ease-linear',
leaveToClass: 'opacity-0'
timeout: 150,
classNames: {
enter: 'opacity-0 scale-75',
enterActive: 'opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in',
exit: 'opacity-100',
exitActive: '!opacity-0 transition-opacity duration-150 ease-linear'
}
}
};
Expand All @@ -22,10 +25,10 @@ const Tailwind = {
})
}),
input: {
root: ({ props }) => ({
root: ({ parent }) => ({
className: classNames('font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none', 'hover:border-blue-500', {
'rounded-lg': !props.showIcon,
'border-r-0 rounded-l-lg': props.showIcon
'rounded-lg': !parent.props.showIcon,
'border-r-0 rounded-l-lg': parent.props.showIcon
})
})
},
Expand All @@ -44,13 +47,11 @@ const Tailwind = {
className: classNames('flex items-center justify-between', 'p-2 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-semibold m-0 border-b border-gray-300 dark:border-blue-900/40 rounded-t-lg')
},
previousButton: {
root: ({ props }) => ({
className: classNames(
'flex items-center justify-center cursor-pointer overflow-hidden relative',
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
)
})
className: classNames(
'flex items-center justify-center cursor-pointer overflow-hidden relative',
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
)
},
title: 'leading-8 mx-auto',
monthTitle: {
Expand All @@ -60,13 +61,11 @@ const Tailwind = {
className: classNames('text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'hover:text-blue-500')
},
nextButton: {
root: ({ props }) => ({
className: classNames(
'flex items-center justify-center cursor-pointer overflow-hidden relative',
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
)
})
className: classNames(
'flex items-center justify-center cursor-pointer overflow-hidden relative',
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
)
},
table: {
className: classNames('border-collapse w-full', 'my-2')
Expand Down Expand Up @@ -139,41 +138,8 @@ const Tailwind = {
className: classNames('flex-1', 'border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0', 'first:pl-0 first:border-l-0')
},
transition: TRANSITIONS.overlay
},
listbox: {
root: {
className: classNames('bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-56')
},
wrapper: 'overflow-auto',
list: 'py-3 list-none m-0',
item: ({ context }) => ({
className: classNames('cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'm-0 p-3 border-0 transition-shadow duration-200 rounded-none', {
'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected,
'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
})
}),
itemgroup: {
className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
},
header: {
className: classNames('p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40')
},
filtercontainer: 'relative',
filterinput: {
root: {
className: classNames(
'pr-7 -mr-7',
'w-full',
'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
)
}
},
filtericon: '-mt-2 absolute top-1/2'
}
}
`
};

Expand Down
Loading

0 comments on commit 9a61f19

Please sign in to comment.