From bac10250df3dab88b1d48d8d801680bdbe797284 Mon Sep 17 00:00:00 2001 From: Atakan Date: Sat, 4 May 2024 11:48:36 +0300 Subject: [PATCH] add bg-primary-color for lara #201 --- presets/aura/button/index.js | 8 +- presets/aura/speeddial/index.js | 12 +- presets/aura/splitbutton/index.js | 16 +- presets/lara/button/index.js | 454 ++++++------- presets/lara/speeddial/index.js | 579 +++++++++-------- presets/lara/splitbutton/index.js | 1004 ++++++++++++++--------------- 6 files changed, 1049 insertions(+), 1024 deletions(-) diff --git a/presets/aura/button/index.js b/presets/aura/button/index.js index 4d98835c..6876e388 100644 --- a/presets/aura/button/index.js +++ b/presets/aura/button/index.js @@ -47,9 +47,9 @@ export default { 'border border-primary-color': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain }, // Primary Text Button - { 'text-primary-500 dark:text-primary-400': props.text && props.severity === null && !props.plain }, + { 'text-primary-color': props.text && props.severity === null && !props.plain }, // Primary Outlined Button - { 'text-primary-500 border border-primary-500 hover:bg-primary-300/10': props.outlined && props.severity === null && !props.plain }, + { 'text-primary-color border border-primary-color': props.outlined && props.severity === null && !props.plain }, // Secondary Button { @@ -132,7 +132,7 @@ export default { 'focus:outline-none focus:outline-offset-0 focus:ring-1', // Link - { 'focus:ring-primary-500 dark:focus:ring-primary-400': props.link }, + { 'focus:ring-primary-color': props.link }, // Plain { 'hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text }, @@ -141,7 +141,7 @@ export default { // Primary { 'hover:bg-primary-hover-color hover:border-primary-hover-color': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-primary-500 dark:focus:ring-primary-400': props.severity === null }, + { 'focus:ring-primary-color': props.severity === null }, // Text & Outlined Button { 'hover:bg-primary-300/10': (props.text || props.outlined) && props.severity === null && !props.plain }, diff --git a/presets/aura/speeddial/index.js b/presets/aura/speeddial/index.js index a94f036c..e315d187 100644 --- a/presets/aura/speeddial/index.js +++ b/presets/aura/speeddial/index.js @@ -18,7 +18,6 @@ export default { // Shapes 'rounded-full', 'shadow-md', - // Link Button { 'text-primary-600 bg-transparent border-transparent': props.link }, @@ -44,9 +43,9 @@ export default { 'border border-primary-color': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain }, // Primary Text Button - { 'text-primary-500 dark:text-primary-400': props.text && props.severity === null && !props.plain }, + { 'text-primary-color': props.text && props.severity === null && !props.plain }, // Primary Outlined Button - { 'text-primary-500 border border-primary-500 hover:bg-primary-300/10': props.outlined && props.severity === null && !props.plain }, + { 'text-primary-color border border-primary-color': props.outlined && props.severity === null && !props.plain }, // Secondary Button { @@ -129,7 +128,7 @@ export default { 'focus:outline-none focus:outline-offset-0 focus:ring-1', // Link - { 'focus:ring-primary-500 dark:focus:ring-primary-400': props.link }, + { 'focus:ring-primary-color': props.link }, // Plain { 'hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text }, @@ -138,7 +137,7 @@ export default { // Primary { 'hover:bg-primary-hover-color hover:border-primary-hover-color': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-primary-500 dark:focus:ring-primary-400': props.severity === null }, + { 'focus:ring-primary-color': props.severity === null }, // Text & Outlined Button { 'hover:bg-primary-300/10': (props.text || props.outlined) && props.severity === null && !props.plain }, @@ -189,7 +188,6 @@ export default { // Transitions 'transition duration-200 ease-in-out', - parent.state.d_visible ? 'rotate-45' : 'rotate-0', // Misc 'cursor-pointer overflow-hidden select-none' @@ -198,7 +196,7 @@ export default { label: ({ props }) => ({ class: [ 'duration-200', - 'font-bold', + 'font-medium', { 'hover:underline': props.link }, diff --git a/presets/aura/splitbutton/index.js b/presets/aura/splitbutton/index.js index bc30c993..730407d3 100644 --- a/presets/aura/splitbutton/index.js +++ b/presets/aura/splitbutton/index.js @@ -60,9 +60,9 @@ export default { 'border border-primary-color': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, // Primary Text Button - { 'text-primary-500 dark:text-primary-400': parent.props.text && parent.props.severity === null && !parent.props.plain }, + { 'text-primary-color': parent.props.text && parent.props.severity === null && !parent.props.plain }, // Primary Outlined Button - { 'text-primary-500 border border-primary-500 hover:bg-primary-300/10': parent.props.outlined && parent.props.severity === null && !parent.props.plain }, + { 'text-primary-color border border-primary-color': parent.props.outlined && parent.props.severity === null && !parent.props.plain }, // Secondary Button { @@ -145,7 +145,7 @@ export default { 'focus:outline-none focus:outline-offset-0 focus:ring-1', // Link - { 'focus:ring-primary-500 dark:focus:ring-primary-400': parent.props.link }, + { 'focus:ring-primary-color': parent.props.link }, // Plain { 'hover:bg-gray-600 hover:border-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text }, @@ -154,7 +154,7 @@ export default { // Primary { 'hover:bg-primary-hover-color hover:border-primary-hover-color': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-primary-500 dark:focus:ring-primary-400': parent.props.severity === null }, + { 'focus:ring-primary-color': parent.props.severity === null }, // Text & Outlined Button { 'hover:bg-primary-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain }, @@ -263,9 +263,9 @@ export default { 'border border-primary-color': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, // Primary Text Button - { 'text-primary-500 dark:text-primary-400': parent.props.text && parent.props.severity === null && !parent.props.plain }, + { 'text-primary-color': parent.props.text && parent.props.severity === null && !parent.props.plain }, // Primary Outlined Button - { 'text-primary-500 border border-primary-500 hover:bg-primary-300/10': parent.props.outlined && parent.props.severity === null && !parent.props.plain }, + { 'text-primary-color border border-primary-color': parent.props.outlined && parent.props.severity === null && !parent.props.plain }, // Secondary Button { @@ -348,7 +348,7 @@ export default { 'focus:outline-none focus:outline-offset-0 focus:ring-1', // Link - { 'focus:ring-primary-500 dark:focus:ring-primary-400': parent.props.link }, + { 'focus:ring-primary-color': parent.props.link }, // Plain { 'hover:bg-gray-600 hover:border-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text }, @@ -357,7 +357,7 @@ export default { // Primary { 'hover:bg-primary-hover-color hover:border-primary-hover-color': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-primary-500 dark:focus:ring-primary-400': parent.props.severity === null }, + { 'focus:ring-primary-color': parent.props.severity === null }, // Text & Outlined Button { 'hover:bg-primary-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain }, diff --git a/presets/lara/button/index.js b/presets/lara/button/index.js index e7b37957..ee5830b4 100644 --- a/presets/lara/button/index.js +++ b/presets/lara/button/index.js @@ -1,220 +1,234 @@ -export default { - root: ({ props, context, parent }) => ({ - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'leading-[normal]', - { - 'px-4 py-3': props.size === null, - 'text-sm py-2 px-3': props.size === 'small', - 'text-xl py-3 px-4': props.size === 'large' - }, - { - 'w-12 p-0 py-3': props.label == null && props.icon !== null - }, - - // Shapes - { 'shadow-lg': props.raised }, - { 'rounded-md': !props.rounded, 'rounded-full': props.rounded }, - { 'rounded-none first:rounded-l-md last:rounded-r-md': parent.instance.$name == 'InputGroup' }, - - // Link Button - { 'text-primary-600 bg-transparent border-transparent': props.link }, - - // Plain Button - { 'text-white bg-gray-500 border border-gray-500': props.plain && !props.outlined && !props.text }, - // Plain Text Button - { 'text-surface-500': props.plain && props.text }, - // Plain Outlined Button - { 'text-surface-500 border border-gray-500': props.plain && props.outlined }, - - // Text Button - { 'bg-transparent border-transparent': props.text && !props.plain }, - - // Outlined Button - { 'bg-transparent border': props.outlined && !props.plain }, - - // --- Severity Buttons --- - - // Primary Button - { - 'text-white dark:text-surface-900': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain, - 'bg-primary-500 dark:bg-primary-400': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain, - 'border border-primary-500 dark:border-primary-400': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain - }, - // Primary Text Button - { 'text-primary-500 dark:text-primary-400': props.text && props.severity === null && !props.plain }, - // Primary Outlined Button - { 'text-primary-500 border border-primary-500 hover:bg-primary-300/20': props.outlined && props.severity === null && !props.plain }, - - // Secondary Button - { - 'text-white dark:text-surface-900': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain, - 'bg-surface-500 dark:bg-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain, - 'border border-surface-500 dark:border-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain - }, - // Secondary Text Button - { 'text-surface-500 dark:text-surface-300': props.text && props.severity === 'secondary' && !props.plain }, - // Secondary Outlined Button - { 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/20': props.outlined && props.severity === 'secondary' && !props.plain }, - - // Success Button - { - 'text-white dark:text-green-900': props.severity === 'success' && !props.text && !props.outlined && !props.plain, - 'bg-green-500 dark:bg-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain, - 'border border-green-500 dark:border-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain - }, - // Success Text Button - { 'text-green-500 dark:text-green-400': props.text && props.severity === 'success' && !props.plain }, - // Success Outlined Button - { 'text-green-500 border border-green-500 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain }, - - // Info Button - { - 'text-white dark:text-surface-900': props.severity === 'info' && !props.text && !props.outlined && !props.plain, - 'bg-blue-500 dark:bg-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain, - 'border border-blue-500 dark:border-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain - }, - // Info Text Button - { 'text-blue-500 dark:text-blue-400': props.text && props.severity === 'info' && !props.plain }, - // Info Outlined Button - { 'text-blue-500 border border-blue-500 hover:bg-blue-300/20 ': props.outlined && props.severity === 'info' && !props.plain }, - - // Warning Button - { - 'text-white dark:text-surface-900': props.severity === 'warning' && !props.text && !props.outlined && !props.plain, - 'bg-orange-500 dark:bg-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain, - 'border border-orange-500 dark:border-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain - }, - // Warning Text Button - { 'text-orange-500 dark:text-orange-400': props.text && props.severity === 'warning' && !props.plain }, - // Warning Outlined Button - { 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain }, - - // Help Button - { - 'text-white dark:text-surface-900': props.severity === 'help' && !props.text && !props.outlined && !props.plain, - 'bg-purple-500 dark:bg-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain, - 'border border-purple-500 dark:border-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain - }, - // Help Text Button - { 'text-purple-500 dark:text-purple-400': props.text && props.severity === 'help' && !props.plain }, - // Help Outlined Button - { 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain }, - - // Danger Button - { - 'text-white dark:text-surface-900': props.severity === 'danger' && !props.text && !props.outlined && !props.plain, - 'bg-red-500 dark:bg-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain, - 'border border-red-500 dark:border-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain - }, - // Danger Text Button - { 'text-red-500 dark:text-red-400': props.text && props.severity === 'danger' && !props.plain }, - // Danger Outlined Button - { 'text-red-500 border border-red-500 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain }, - - // --- Severity Button States --- - 'focus:outline-none focus:outline-offset-0 focus:ring', - - // Link - { 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50': props.link }, - - // Plain - { 'hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text }, - // Text & Outlined Button - { 'hover:bg-surface-300/20': props.plain && (props.text || props.outlined) }, - - // Primary - { 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50': props.severity === null }, - // Text & Outlined Button - { 'hover:bg-primary-300/20': (props.text || props.outlined) && props.severity === null && !props.plain }, - - // Secondary - { 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-surface-400/50 dark:focus:ring-surface-300/50': props.severity === 'secondary' }, - // Text & Outlined Button - { 'hover:bg-surface-300/20': (props.text || props.outlined) && props.severity === 'secondary' && !props.plain }, - - // Success - { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': props.severity === 'success' && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-green-400/50 dark:focus:ring-green-300/50': props.severity === 'success' }, - // Text & Outlined Button - { 'hover:bg-green-300/20': (props.text || props.outlined) && props.severity === 'success' && !props.plain }, - - // Info - { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': props.severity === 'info' && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-blue-400/50 dark:focus:ring-blue-300/50': props.severity === 'info' }, - // Text & Outlined Button - { 'hover:bg-blue-300/20': (props.text || props.outlined) && props.severity === 'info' && !props.plain }, - - // Warning - { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': props.severity === 'warning' && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-orange-400/50 dark:focus:ring-orange-300/50': props.severity === 'warning' }, - // Text & Outlined Button - { 'hover:bg-orange-300/20': (props.text || props.outlined) && props.severity === 'warning' && !props.plain }, - - // Help - { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': props.severity === 'help' && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-purple-400/50 dark:focus:ring-purple-300/50': props.severity === 'help' }, - // Text & Outlined Button - { 'hover:bg-purple-300/20': (props.text || props.outlined) && props.severity === 'help' && !props.plain }, - - // Danger - { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': props.severity === 'danger' && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-red-400/50 dark:focus:ring-red-300/50': props.severity === 'danger' }, - // Text & Outlined Button - { 'hover:bg-red-300/20': (props.text || props.outlined) && props.severity === 'danger' && !props.plain }, - - // Disabled - { 'opacity-60 pointer-events-none cursor-default': context.disabled }, - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer overflow-hidden select-none' - ] - }), - label: ({ props }) => ({ - class: [ - 'duration-200', - 'font-bold', - { - 'hover:underline': props.link - }, - { 'flex-1': props.label !== null, 'invisible w-0': props.label == null } - ] - }), - icon: ({ props }) => ({ - class: [ - 'mx-0', - { - 'mr-2': props.iconPos == 'left' && 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 - } - ] - }), - loadingicon: ({ props }) => ({ - class: [ - 'h-4 w-4', - 'mx-0', - { - 'mr-2': props.iconPos == 'left' && 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 - }, - 'animate-spin' - ] - }), - badge: ({ props }) => ({ - class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }] - }) -}; +export default { + root: ({ props, context, parent }) => ({ + class: [ + 'relative', + + // Alignments + 'items-center inline-flex text-center align-bottom justify-center', + + // Sizes & Spacing + 'leading-[normal]', + { + 'px-4 py-3': props.size === null, + 'text-sm py-2 px-3': props.size === 'small', + 'text-xl py-3 px-4': props.size === 'large' + }, + { + 'w-12 p-0 py-3': props.label == null && props.icon !== null + }, + + // Shapes + { 'shadow-lg': props.raised }, + { 'rounded-md': !props.rounded, 'rounded-full': props.rounded }, + { 'rounded-none first:rounded-l-md last:rounded-r-md': parent.instance.$name == 'InputGroup' }, + + // Link Button + { 'text-primary-600 bg-transparent border-transparent': props.link }, + + // Plain Button + { 'text-white bg-gray-500 border border-gray-500': props.plain && !props.outlined && !props.text }, + // Plain Text Button + { 'text-surface-500': props.plain && props.text }, + // Plain Outlined Button + { 'text-surface-500 border border-gray-500': props.plain && props.outlined }, + + // Text Button + { 'bg-transparent border-transparent': props.text && !props.plain }, + + // Outlined Button + { 'bg-transparent border': props.outlined && !props.plain }, + + // --- Severity Buttons --- + + // Primary Button + { + 'text-primary-inverse-color': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain, + 'bg-primary-color': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain, + 'border border-primary-color': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain + }, + // Primary Text Button + { 'text-primary-color': props.text && props.severity === null && !props.plain }, + // Primary Outlined Button + { 'text-primary-color border border-primary-color': props.outlined && props.severity === null && !props.plain }, + + // Secondary Button + { + 'text-white dark:text-surface-900': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain, + 'bg-surface-500 dark:bg-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain, + 'border border-surface-500 dark:border-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain + }, + // Secondary Text Button + { 'text-surface-500 dark:text-surface-300': props.text && props.severity === 'secondary' && !props.plain }, + // Secondary Outlined Button + { 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/20': props.outlined && props.severity === 'secondary' && !props.plain }, + + // Success Button + { + 'text-white dark:text-green-900': props.severity === 'success' && !props.text && !props.outlined && !props.plain, + 'bg-green-500 dark:bg-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain, + 'border border-green-500 dark:border-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain + }, + // Success Text Button + { 'text-green-500 dark:text-green-400': props.text && props.severity === 'success' && !props.plain }, + // Success Outlined Button + { 'text-green-500 border border-green-500 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain }, + + // Info Button + { + 'text-white dark:text-surface-900': props.severity === 'info' && !props.text && !props.outlined && !props.plain, + 'bg-blue-500 dark:bg-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain, + 'border border-blue-500 dark:border-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain + }, + // Info Text Button + { 'text-blue-500 dark:text-blue-400': props.text && props.severity === 'info' && !props.plain }, + // Info Outlined Button + { 'text-blue-500 border border-blue-500 hover:bg-blue-300/20 ': props.outlined && props.severity === 'info' && !props.plain }, + + // Warning Button + { + 'text-white dark:text-surface-900': props.severity === 'warning' && !props.text && !props.outlined && !props.plain, + 'bg-orange-500 dark:bg-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain, + 'border border-orange-500 dark:border-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain + }, + // Warning Text Button + { 'text-orange-500 dark:text-orange-400': props.text && props.severity === 'warning' && !props.plain }, + // Warning Outlined Button + { 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain }, + + // Help Button + { + 'text-white dark:text-surface-900': props.severity === 'help' && !props.text && !props.outlined && !props.plain, + 'bg-purple-500 dark:bg-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain, + 'border border-purple-500 dark:border-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain + }, + // Help Text Button + { 'text-purple-500 dark:text-purple-400': props.text && props.severity === 'help' && !props.plain }, + // Help Outlined Button + { 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain }, + + // Danger Button + { + 'text-white dark:text-surface-900': props.severity === 'danger' && !props.text && !props.outlined && !props.plain, + 'bg-red-500 dark:bg-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain, + 'border border-red-500 dark:border-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain + }, + // Danger Text Button + { 'text-red-500 dark:text-red-400': props.text && props.severity === 'danger' && !props.plain }, + // Danger Outlined Button + { 'text-red-500 border border-red-500 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain }, + // Contrast Button + { + 'text-white dark:text-surface-900': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain, + 'bg-surface-900 dark:bg-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain, + 'border border-surface-900 dark:border-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain + }, + // Contrast Text Button + { 'text-surface-900 dark:text-surface-0': props.text && props.severity === 'contrast' && !props.plain }, + // Contrast Outlined Button + { 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': props.outlined && props.severity === 'contrast' && !props.plain }, + + // --- Severity Button States --- + 'focus:outline-none focus:outline-offset-0 focus:ring', + + // Link + { 'focus:ring-primary-color': props.link }, + + // Plain + { 'hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text }, + // Text & Outlined Button + { 'hover:bg-surface-300/20': props.plain && (props.text || props.outlined) }, + + // Primary + { 'hover:bg-primary-hover-color hover:border-primary-hover-color': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain }, + { 'focus:ring-primary-color': props.severity === null }, + // Text & Outlined Button + { 'hover:bg-primary-300/20': (props.text || props.outlined) && props.severity === null && !props.plain }, + + // Secondary + { 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain }, + { 'focus:ring-surface-400/50 dark:focus:ring-surface-300/50': props.severity === 'secondary' }, + // Text & Outlined Button + { 'hover:bg-surface-300/20': (props.text || props.outlined) && props.severity === 'secondary' && !props.plain }, + + // Success + { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': props.severity === 'success' && !props.text && !props.outlined && !props.plain }, + { 'focus:ring-green-400/50 dark:focus:ring-green-300/50': props.severity === 'success' }, + // Text & Outlined Button + { 'hover:bg-green-300/20': (props.text || props.outlined) && props.severity === 'success' && !props.plain }, + + // Info + { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': props.severity === 'info' && !props.text && !props.outlined && !props.plain }, + { 'focus:ring-blue-400/50 dark:focus:ring-blue-300/50': props.severity === 'info' }, + // Text & Outlined Button + { 'hover:bg-blue-300/20': (props.text || props.outlined) && props.severity === 'info' && !props.plain }, + + // Warning + { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': props.severity === 'warning' && !props.text && !props.outlined && !props.plain }, + { 'focus:ring-orange-400/50 dark:focus:ring-orange-300/50': props.severity === 'warning' }, + // Text & Outlined Button + { 'hover:bg-orange-300/20': (props.text || props.outlined) && props.severity === 'warning' && !props.plain }, + + // Help + { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': props.severity === 'help' && !props.text && !props.outlined && !props.plain }, + { 'focus:ring-purple-400/50 dark:focus:ring-purple-300/50': props.severity === 'help' }, + // Text & Outlined Button + { 'hover:bg-purple-300/20': (props.text || props.outlined) && props.severity === 'help' && !props.plain }, + + // Danger + { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': props.severity === 'danger' && !props.text && !props.outlined && !props.plain }, + { 'focus:ring-red-400/50 dark:focus:ring-red-300/50': props.severity === 'danger' }, + // Text & Outlined Button + { 'hover:bg-red-300/20': (props.text || props.outlined) && props.severity === 'danger' && !props.plain }, + // Contrast + { 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain }, + { 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'contrast' }, + // Text & Outlined Button + { 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (props.text || props.outlined) && props.severity === 'contrast' && !props.plain }, + // Disabled + { 'opacity-60 pointer-events-none cursor-default': context.disabled }, + + // Transitions + 'transition duration-200 ease-in-out', + + // Misc + 'cursor-pointer overflow-hidden select-none' + ] + }), + label: ({ props }) => ({ + class: [ + 'duration-200', + 'font-bold', + { + 'hover:underline': props.link + }, + { 'flex-1': props.label !== null, 'invisible w-0': props.label == null } + ] + }), + icon: ({ props }) => ({ + class: [ + 'mx-0', + { + 'mr-2': props.iconPos == 'left' && 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 + } + ] + }), + loadingicon: ({ props }) => ({ + class: [ + 'h-4 w-4', + 'mx-0', + { + 'mr-2': props.iconPos == 'left' && 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 + }, + 'animate-spin' + ] + }), + badge: ({ props }) => ({ + class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }] + }) +}; diff --git a/presets/lara/speeddial/index.js b/presets/lara/speeddial/index.js index 7ecbbcf2..1ed485c9 100644 --- a/presets/lara/speeddial/index.js +++ b/presets/lara/speeddial/index.js @@ -1,283 +1,296 @@ -export default { - root: { - class: 'absolute flex' - }, - button: { - root: ({ props, context, parent }) => ({ - class: [ - 'relative', - 'z-20', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'leading-[normal]', - 'w-16 h-16 p-0 py-3', - - // Shapes - 'rounded-full', - 'shadow-md', - - // Link Button - { 'text-primary-600 bg-transparent border-transparent': props.link }, - - // Plain Button - { 'text-white bg-gray-500 border border-gray-500': props.plain && !props.outlined && !props.text }, - // Plain Text Button - { 'text-surface-500': props.plain && props.text }, - // Plain Outlined Button - { 'text-surface-500 border border-gray-500': props.plain && props.outlined }, - - // Text Button - { 'bg-transparent border-transparent': props.text && !props.plain }, - - // Outlined Button - { 'bg-transparent border': props.outlined && !props.plain }, - - // --- Severity Buttons --- - - // Primary Button - { - 'text-white dark:text-surface-900': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain, - 'bg-primary-500 dark:bg-primary-400': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain, - 'border border-primary-500 dark:border-primary-400': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain - }, - // Primary Text Button - { 'text-primary-500 dark:text-primary-400': props.text && props.severity === null && !props.plain }, - // Primary Outlined Button - { 'text-primary-500 border border-primary-500 hover:bg-primary-300/20': props.outlined && props.severity === null && !props.plain }, - - // Secondary Button - { - 'text-white dark:text-surface-900': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain, - 'bg-surface-500 dark:bg-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain, - 'border border-surface-500 dark:border-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain - }, - // Secondary Text Button - { 'text-surface-500 dark:text-surface-300': props.text && props.severity === 'secondary' && !props.plain }, - // Secondary Outlined Button - { 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/20': props.outlined && props.severity === 'secondary' && !props.plain }, - - // Success Button - { - 'text-white dark:text-green-900': props.severity === 'success' && !props.text && !props.outlined && !props.plain, - 'bg-green-500 dark:bg-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain, - 'border border-green-500 dark:border-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain - }, - // Success Text Button - { 'text-green-500 dark:text-green-400': props.text && props.severity === 'success' && !props.plain }, - // Success Outlined Button - { 'text-green-500 border border-green-500 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain }, - - // Info Button - { - 'text-white dark:text-surface-900': props.severity === 'info' && !props.text && !props.outlined && !props.plain, - 'bg-blue-500 dark:bg-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain, - 'border border-blue-500 dark:border-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain - }, - // Info Text Button - { 'text-blue-500 dark:text-blue-400': props.text && props.severity === 'info' && !props.plain }, - // Info Outlined Button - { 'text-blue-500 border border-blue-500 hover:bg-blue-300/20 ': props.outlined && props.severity === 'info' && !props.plain }, - - // Warning Button - { - 'text-white dark:text-surface-900': props.severity === 'warning' && !props.text && !props.outlined && !props.plain, - 'bg-orange-500 dark:bg-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain, - 'border border-orange-500 dark:border-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain - }, - // Warning Text Button - { 'text-orange-500 dark:text-orange-400': props.text && props.severity === 'warning' && !props.plain }, - // Warning Outlined Button - { 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain }, - - // Help Button - { - 'text-white dark:text-surface-900': props.severity === 'help' && !props.text && !props.outlined && !props.plain, - 'bg-purple-500 dark:bg-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain, - 'border border-purple-500 dark:border-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain - }, - // Help Text Button - { 'text-purple-500 dark:text-purple-400': props.text && props.severity === 'help' && !props.plain }, - // Help Outlined Button - { 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain }, - - // Danger Button - { - 'text-white dark:text-surface-900': props.severity === 'danger' && !props.text && !props.outlined && !props.plain, - 'bg-red-500 dark:bg-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain, - 'border border-red-500 dark:border-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain - }, - // Danger Text Button - { 'text-red-500 dark:text-red-400': props.text && props.severity === 'danger' && !props.plain }, - // Danger Outlined Button - { 'text-red-500 border border-red-500 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain }, - - // --- Severity Button States --- - 'focus:outline-none focus:outline-offset-0 focus:ring', - - // Link - { 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50': props.link }, - - // Plain - { 'hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text }, - // Text & Outlined Button - { 'hover:bg-surface-300/20': props.plain && (props.text || props.outlined) }, - - // Primary - { 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50': props.severity === null }, - // Text & Outlined Button - { 'hover:bg-primary-300/20': (props.text || props.outlined) && props.severity === null && !props.plain }, - - // Secondary - { 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-surface-400/50 dark:focus:ring-surface-300/50': props.severity === 'secondary' }, - // Text & Outlined Button - { 'hover:bg-surface-300/20': (props.text || props.outlined) && props.severity === 'secondary' && !props.plain }, - - // Success - { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': props.severity === 'success' && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-green-400/50 dark:focus:ring-green-300/50': props.severity === 'success' }, - // Text & Outlined Button - { 'hover:bg-green-300/20': (props.text || props.outlined) && props.severity === 'success' && !props.plain }, - - // Info - { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': props.severity === 'info' && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-blue-400/50 dark:focus:ring-blue-300/50': props.severity === 'info' }, - // Text & Outlined Button - { 'hover:bg-blue-300/20': (props.text || props.outlined) && props.severity === 'info' && !props.plain }, - - // Warning - { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': props.severity === 'warning' && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-orange-400/50 dark:focus:ring-orange-300/50': props.severity === 'warning' }, - // Text & Outlined Button - { 'hover:bg-orange-300/20': (props.text || props.outlined) && props.severity === 'warning' && !props.plain }, - - // Help - { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': props.severity === 'help' && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-purple-400/50 dark:focus:ring-purple-300/50': props.severity === 'help' }, - // Text & Outlined Button - { 'hover:bg-purple-300/20': (props.text || props.outlined) && props.severity === 'help' && !props.plain }, - - // Danger - { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': props.severity === 'danger' && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-red-400/50 dark:focus:ring-red-300/50': props.severity === 'danger' }, - // Text & Outlined Button - { 'hover:bg-red-300/20': (props.text || props.outlined) && props.severity === 'danger' && !props.plain }, - - // Disabled - { 'opacity-60 pointer-events-none cursor-default': context.disabled }, - - // Transitions - 'transition duration-200 ease-in-out', - parent.state.d_visible ? 'rotate-45' : 'rotate-0', - - // Misc - 'cursor-pointer overflow-hidden select-none' - ] - }), - label: ({ props }) => ({ - class: [ - 'duration-200', - 'font-bold', - { - 'hover:underline': props.link - }, - { 'flex-1': props.label !== null, 'invisible w-0': props.label == null } - ] - }), - icon: ({ props }) => ({ - class: [ - 'mx-0', - { - 'mr-2': props.iconPos == 'left' && 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 - } - ] - }), - loadingicon: ({ props }) => ({ - class: [ - 'h-4 w-4', - 'mx-0', - { - 'mr-2': props.iconPos == 'left' && 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 - }, - 'animate-spin' - ] - }), - badge: ({ props }) => ({ - class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }] - }) - }, - menu: { - class: [ - // Spacing - 'm-0 p-0', - - // Layout & Flexbox - 'list-none flex items-center justify-center', - - // Transitions - 'transition delay-200', - - // Z-Index (Positioning) - 'z-20' - ] - }, - menuitem: ({ props, context }) => ({ - class: [ - 'transform transition-transform duration-200 ease-out transition-opacity duration-800', - - // Conditional Appearance - context.hidden ? 'opacity-0 scale-0' : 'opacity-100 scale-100', - - // Conditional Spacing - { - 'my-1 first:mb-2': props.direction == 'up' && props.type == 'linear', - 'my-1 first:mt-2': props.direction == 'down' && props.type == 'linear', - 'mx-1 first:mr-2': props.direction == 'left' && props.type == 'linear', - 'mx-1 first:ml-2': props.direction == 'right' && props.type == 'linear' - }, - - // Conditional Positioning - { absolute: props.type !== 'linear' } - ] - }), - action: { - class: [ - // Flexbox & Alignment - 'flex items-center justify-center', - - // Size - 'w-12 h-12', - - // Shape - 'rounded-full relative overflow-hidden', - - // Appearance - 'bg-surface-600 dark:bg-surface-0/80 text-white dark:text-surface-900/80', - - // Hover Effects - 'hover:bg-surface-700 dark:hover:bg-surface-200/80' - ] - }, - mask: ({ state }) => ({ - class: [ - // Base Styles - 'absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-black/40 z-0', - - // Conditional Appearance - { - 'opacity-0 pointer-events-none': !state.d_visible, - 'opacity-100 transition-opacity duration-400 ease-in-out': state.d_visible - } - ] - }) -}; +export default { + root: { + class: 'absolute flex' + }, + button: { + root: ({ props, context, parent }) => ({ + class: [ + 'relative', + 'z-20', + + // Alignments + 'items-center inline-flex text-center align-bottom justify-center', + + // Sizes & Spacing + 'leading-[normal]', + 'w-16 h-16 p-0 py-3', + + // Shapes + 'rounded-full', + 'shadow-md', + + // Link Button + { 'text-primary-600 bg-transparent border-transparent': props.link }, + + // Plain Button + { 'text-white bg-gray-500 border border-gray-500': props.plain && !props.outlined && !props.text }, + // Plain Text Button + { 'text-surface-500': props.plain && props.text }, + // Plain Outlined Button + { 'text-surface-500 border border-gray-500': props.plain && props.outlined }, + + // Text Button + { 'bg-transparent border-transparent': props.text && !props.plain }, + + // Outlined Button + { 'bg-transparent border': props.outlined && !props.plain }, + + // --- Severity Buttons --- + + // Primary Button + { + 'text-primary-inverse-color': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain, + 'bg-primary-color': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain, + 'border border-primary-color': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain + }, + // Primary Text Button + { 'text-primary-color': props.text && props.severity === null && !props.plain }, + // Primary Outlined Button + { 'text-primary-color border border-primary-color': props.outlined && props.severity === null && !props.plain }, + + // Secondary Button + { + 'text-white dark:text-surface-900': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain, + 'bg-surface-500 dark:bg-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain, + 'border border-surface-500 dark:border-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain + }, + // Secondary Text Button + { 'text-surface-500 dark:text-surface-300': props.text && props.severity === 'secondary' && !props.plain }, + // Secondary Outlined Button + { 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/20': props.outlined && props.severity === 'secondary' && !props.plain }, + + // Success Button + { + 'text-white dark:text-green-900': props.severity === 'success' && !props.text && !props.outlined && !props.plain, + 'bg-green-500 dark:bg-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain, + 'border border-green-500 dark:border-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain + }, + // Success Text Button + { 'text-green-500 dark:text-green-400': props.text && props.severity === 'success' && !props.plain }, + // Success Outlined Button + { 'text-green-500 border border-green-500 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain }, + + // Info Button + { + 'text-white dark:text-surface-900': props.severity === 'info' && !props.text && !props.outlined && !props.plain, + 'bg-blue-500 dark:bg-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain, + 'border border-blue-500 dark:border-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain + }, + // Info Text Button + { 'text-blue-500 dark:text-blue-400': props.text && props.severity === 'info' && !props.plain }, + // Info Outlined Button + { 'text-blue-500 border border-blue-500 hover:bg-blue-300/20 ': props.outlined && props.severity === 'info' && !props.plain }, + + // Warning Button + { + 'text-white dark:text-surface-900': props.severity === 'warning' && !props.text && !props.outlined && !props.plain, + 'bg-orange-500 dark:bg-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain, + 'border border-orange-500 dark:border-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain + }, + // Warning Text Button + { 'text-orange-500 dark:text-orange-400': props.text && props.severity === 'warning' && !props.plain }, + // Warning Outlined Button + { 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain }, + + // Help Button + { + 'text-white dark:text-surface-900': props.severity === 'help' && !props.text && !props.outlined && !props.plain, + 'bg-purple-500 dark:bg-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain, + 'border border-purple-500 dark:border-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain + }, + // Help Text Button + { 'text-purple-500 dark:text-purple-400': props.text && props.severity === 'help' && !props.plain }, + // Help Outlined Button + { 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain }, + + // Danger Button + { + 'text-white dark:text-surface-900': props.severity === 'danger' && !props.text && !props.outlined && !props.plain, + 'bg-red-500 dark:bg-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain, + 'border border-red-500 dark:border-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain + }, + // Danger Text Button + { 'text-red-500 dark:text-red-400': props.text && props.severity === 'danger' && !props.plain }, + // Danger Outlined Button + { 'text-red-500 border border-red-500 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain }, + // Contrast Button + { + 'text-white dark:text-surface-900': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain, + 'bg-surface-900 dark:bg-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain, + 'border border-surface-900 dark:border-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain + }, + // Contrast Text Button + { 'text-surface-900 dark:text-surface-0': props.text && props.severity === 'contrast' && !props.plain }, + // Contrast Outlined Button + { 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': props.outlined && props.severity === 'contrast' && !props.plain }, + + // --- Severity Button States --- + 'focus:outline-none focus:outline-offset-0 focus:ring', + + // Link + { 'focus:ring-primary-color': props.link }, + + // Plain + { 'hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text }, + // Text & Outlined Button + { 'hover:bg-surface-300/20': props.plain && (props.text || props.outlined) }, + + // Primary + { 'hover:bg-primary-hover-color hover:border-primary-hover-color': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain }, + { 'focus:ring-primary-color': props.severity === null }, + // Text & Outlined Button + { 'hover:bg-primary-300/20': (props.text || props.outlined) && props.severity === null && !props.plain }, + + // Secondary + { 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain }, + { 'focus:ring-surface-400/50 dark:focus:ring-surface-300/50': props.severity === 'secondary' }, + // Text & Outlined Button + { 'hover:bg-surface-300/20': (props.text || props.outlined) && props.severity === 'secondary' && !props.plain }, + + // Success + { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': props.severity === 'success' && !props.text && !props.outlined && !props.plain }, + { 'focus:ring-green-400/50 dark:focus:ring-green-300/50': props.severity === 'success' }, + // Text & Outlined Button + { 'hover:bg-green-300/20': (props.text || props.outlined) && props.severity === 'success' && !props.plain }, + + // Info + { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': props.severity === 'info' && !props.text && !props.outlined && !props.plain }, + { 'focus:ring-blue-400/50 dark:focus:ring-blue-300/50': props.severity === 'info' }, + // Text & Outlined Button + { 'hover:bg-blue-300/20': (props.text || props.outlined) && props.severity === 'info' && !props.plain }, + + // Warning + { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': props.severity === 'warning' && !props.text && !props.outlined && !props.plain }, + { 'focus:ring-orange-400/50 dark:focus:ring-orange-300/50': props.severity === 'warning' }, + // Text & Outlined Button + { 'hover:bg-orange-300/20': (props.text || props.outlined) && props.severity === 'warning' && !props.plain }, + + // Help + { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': props.severity === 'help' && !props.text && !props.outlined && !props.plain }, + { 'focus:ring-purple-400/50 dark:focus:ring-purple-300/50': props.severity === 'help' }, + // Text & Outlined Button + { 'hover:bg-purple-300/20': (props.text || props.outlined) && props.severity === 'help' && !props.plain }, + + // Danger + { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': props.severity === 'danger' && !props.text && !props.outlined && !props.plain }, + { 'focus:ring-red-400/50 dark:focus:ring-red-300/50': props.severity === 'danger' }, + // Text & Outlined Button + { 'hover:bg-red-300/20': (props.text || props.outlined) && props.severity === 'danger' && !props.plain }, + // Contrast + { 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain }, + { 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'contrast' }, + // Text & Outlined Button + { 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (props.text || props.outlined) && props.severity === 'contrast' && !props.plain }, + // Disabled + { 'opacity-60 pointer-events-none cursor-default': context.disabled }, + + // Transitions + 'transition duration-200 ease-in-out', + + // Misc + 'cursor-pointer overflow-hidden select-none' + ] + }), + label: ({ props }) => ({ + class: [ + 'duration-200', + 'font-bold', + { + 'hover:underline': props.link + }, + { 'flex-1': props.label !== null, 'invisible w-0': props.label == null } + ] + }), + icon: ({ props }) => ({ + class: [ + 'mx-0', + { + 'mr-2': props.iconPos == 'left' && 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 + } + ] + }), + loadingicon: ({ props }) => ({ + class: [ + 'h-4 w-4', + 'mx-0', + { + 'mr-2': props.iconPos == 'left' && 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 + }, + 'animate-spin' + ] + }), + badge: ({ props }) => ({ + class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }] + }) + }, + menu: { + class: [ + // Spacing + 'm-0 p-0', + + // Layout & Flexbox + 'list-none flex items-center justify-center', + + // Transitions + 'transition delay-200', + + // Z-Index (Positioning) + 'z-20' + ] + }, + menuitem: ({ props, context }) => ({ + class: [ + 'transform transition-transform duration-200 ease-out transition-opacity duration-800', + + // Conditional Appearance + context.hidden ? 'opacity-0 scale-0' : 'opacity-100 scale-100', + + // Conditional Spacing + { + 'my-1 first:mb-2': props.direction == 'up' && props.type == 'linear', + 'my-1 first:mt-2': props.direction == 'down' && props.type == 'linear', + 'mx-1 first:mr-2': props.direction == 'left' && props.type == 'linear', + 'mx-1 first:ml-2': props.direction == 'right' && props.type == 'linear' + }, + + // Conditional Positioning + { absolute: props.type !== 'linear' } + ] + }), + action: { + class: [ + // Flexbox & Alignment + 'flex items-center justify-center', + + // Size + 'w-12 h-12', + + // Shape + 'rounded-full relative overflow-hidden', + + // Appearance + 'bg-surface-600 dark:bg-surface-0/80 text-white dark:text-surface-900/80', + + // Hover Effects + 'hover:bg-surface-700 dark:hover:bg-surface-200/80' + ] + }, + mask: ({ state }) => ({ + class: [ + // Base Styles + 'absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-black/40 z-0', + + // Conditional Appearance + { + 'opacity-0 pointer-events-none': !state.d_visible, + 'opacity-100 transition-opacity duration-400 ease-in-out': state.d_visible + } + ] + }) +}; diff --git a/presets/lara/splitbutton/index.js b/presets/lara/splitbutton/index.js index 61a42f57..2dd79a52 100644 --- a/presets/lara/splitbutton/index.js +++ b/presets/lara/splitbutton/index.js @@ -1,502 +1,502 @@ -export default { - root: ({ props }) => ({ - class: [ - // Flexbox and Position - 'inline-flex', - 'relative', - - // Shape - 'rounded-md', - { 'shadow-lg': props.raised } - ] - }), - button: { - root: ({ parent }) => ({ - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'leading-[normal]', - { - 'px-4 py-3': parent.props.size === null, - 'text-sm py-2 px-3': parent.props.size === 'small', - 'text-xl py-3 px-4': parent.props.size === 'large' - }, - { - 'min-w-12 p-0 py-3': parent.props.label == null && parent.props.icon !== null - }, - - // Shape - 'rounded-r-none', - 'border-r-0', - { 'rounded-l-full': parent.props.rounded }, - { 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded }, - - // Link Button - { 'text-primary-600 bg-transparent border-transparent': parent.props.link }, - - // Plain Button - { 'text-white bg-gray-500 border border-gray-500': parent.props.plain && !parent.props.outlined && !parent.props.text }, - // Plain Text Button - { 'text-surface-500': parent.props.plain && parent.props.text }, - // Plain Outlined Button - { 'text-surface-500 border border-gray-500': parent.props.plain && parent.props.outlined }, - - // Text Button - { 'bg-transparent border-transparent': parent.props.text && !parent.props.plain }, - - // Outlined Button - { 'bg-transparent border': parent.props.outlined && !parent.props.plain }, - - // --- Severity Buttons --- - - // Primary Button - { - 'text-white dark:text-surface-900': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'bg-primary-500 dark:bg-primary-400': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'border border-primary-500 dark:border-primary-400': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain - }, - // Primary Text Button - { 'text-primary-500 dark:text-primary-400': parent.props.text && parent.props.severity === null && !parent.props.plain }, - // Primary Outlined Button - { 'text-primary-500 border border-primary-500 hover:bg-primary-300/20': parent.props.outlined && parent.props.severity === null && !parent.props.plain }, - - // Secondary Button - { - 'text-white dark:text-surface-900': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'bg-surface-500 dark:bg-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'border border-surface-500 dark:border-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain - }, - // Secondary Text Button - { 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain }, - // Secondary Outlined Button - { 'text-surface-500 border border-surface-500 hover:bg-surface-300/20': parent.props.outlined && parent.props.severity === 'secondary' && !parent.props.plain }, - - // Success Button - { - 'text-white dark:text-surface-900': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'bg-green-500 dark:bg-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'border border-green-500 dark:border-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain - }, - // Success Text Button - { 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain }, - // Success Outlined Button - { 'text-green-500 border border-green-500 hover:bg-green-300/20': parent.props.outlined && parent.props.severity === 'success' && !parent.props.plain }, - - // Info Button - { - 'text-white dark:text-surface-900': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'bg-blue-500 dark:bg-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'border border-blue-500 dark:border-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain - }, - // Info Text Button - { 'text-blue-500 dark:text-blue-400': parent.props.text && parent.props.severity === 'info' && !parent.props.plain }, - // Info Outlined Button - { 'text-blue-500 border border-blue-500 hover:bg-blue-300/20 ': parent.props.outlined && parent.props.severity === 'info' && !parent.props.plain }, - - // Warning Button - { - 'text-white dark:text-surface-900': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'bg-orange-500 dark:bg-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'border border-orange-500 dark:border-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain - }, - // Warning Text Button - { 'text-orange-500 dark:text-orange-400': parent.props.text && parent.props.severity === 'warning' && !parent.props.plain }, - // Warning Outlined Button - { 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': parent.props.outlined && parent.props.severity === 'warning' && !parent.props.plain }, - - // Help Button - { - 'text-white dark:text-surface-900': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'bg-purple-500 dark:bg-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'border border-purple-500 dark:border-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain - }, - // Help Text Button - { 'text-purple-500 dark:text-purple-400': parent.props.text && parent.props.severity === 'help' && !parent.props.plain }, - // Help Outlined Button - { 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': parent.props.outlined && parent.props.severity === 'help' && !parent.props.plain }, - - // Danger Button - { - 'text-white dark:text-surface-900': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'bg-red-500 dark:bg-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'border border-red-500 dark:border-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain - }, - // Danger Text Button - { 'text-red-500 dark:text-red-400': parent.props.text && parent.props.severity === 'danger' && !parent.props.plain }, - // Danger Outlined Button - { 'text-red-500 border border-red-500 hover:bg-red-300/20': parent.props.outlined && parent.props.severity === 'danger' && !parent.props.plain }, - - // --- Severity Button States --- - 'focus:outline-none focus:outline-offset-0 focus:ring', - - // Link - { 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50': parent.props.link }, - - // Plain - { 'hover:bg-gray-600 hover:border-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text }, - // Text & Outlined Button - { 'hover:bg-surface-300/20': parent.props.plain && (parent.props.text || parent.props.outlined) }, - - // Primary - { 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - // Text & Outlined Button - { 'hover:bg-primary-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain }, - - // Secondary - { 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-surface-400/50 dark:focus:ring-surface-300/50': parent.props.severity === 'secondary' }, - // Text & Outlined Button - { 'hover:bg-surface-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'secondary' && !parent.props.plain }, - - // Success - { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-green-400/50 dark:focus:ring-green-300/50': parent.props.severity === 'success' }, - // Text & Outlined Button - { 'hover:bg-green-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'success' && !parent.props.plain }, - - // Info - { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-blue-400/50 dark:focus:ring-blue-300/50': parent.props.severity === 'info' }, - // Text & Outlined Button - { 'hover:bg-blue-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'info' && !parent.props.plain }, - - // Warning - { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-orange-400/50 dark:focus:ring-orange-300/50': parent.props.severity === 'warning' }, - // Text & Outlined Button - { 'hover:bg-orange-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'warning' && !parent.props.plain }, - - // Help - { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-purple-400/50 dark:focus:ring-purple-300/50': parent.props.severity === 'help' }, - // Text & Outlined Button - { 'hover:bg-purple-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'help' && !parent.props.plain }, - - // Warning - { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-red-400/50 dark:focus:ring-red-300/50': parent.props.severity === 'danger' }, - // Text & Outlined Button - { 'hover:bg-red-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'danger' && !parent.props.plain }, - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer overflow-hidden select-none' - ] - }), - icon: { - class: [ - // Margins - 'mr-2' - ] - } - }, - menubutton: { - root: ({ parent }) => ({ - class: [ - 'relative', - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'leading-[normal]', - { - 'px-4 py-3': parent.props.size === null, - 'text-sm py-2 px-3': parent.props.size === 'small', - 'text-xl py-3 px-4': parent.props.size === 'large' - }, - { - 'min-w-12 p-0 py-3': parent.props.label == null && parent.props.icon !== null - }, - - // Shape - 'rounded-l-none', - { 'rounded-l-full': parent.props.rounded }, - { 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded }, - - // Link Button - { 'text-primary-600 bg-transparent border-transparent': parent.props.link }, - - // Plain Button - { 'text-white bg-gray-500 border border-gray-500': parent.props.plain && !parent.props.outlined && !parent.props.text }, - // Plain Text Button - { 'text-surface-500': parent.props.plain && parent.props.text }, - // Plain Outlined Button - { 'text-surface-500 border border-gray-500': parent.props.plain && parent.props.outlined }, - - // Text Button - { 'bg-transparent border-transparent': parent.props.text && !parent.props.plain }, - - // Outlined Button - { 'bg-transparent border': parent.props.outlined && !parent.props.plain }, - - // --- Severity Buttons --- - - // Primary Button - { - 'text-white dark:text-surface-900': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'bg-primary-500 dark:bg-primary-400': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'border border-primary-500 dark:border-primary-400': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain - }, - // Primary Text Button - { 'text-primary-500 dark:text-primary-400': parent.props.text && parent.props.severity === null && !parent.props.plain }, - // Primary Outlined Button - { 'text-primary-500 border border-primary-500 hover:bg-primary-300/20': parent.props.outlined && parent.props.severity === null && !parent.props.plain }, - - // Secondary Button - { - 'text-white dark:text-surface-900': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'bg-surface-500 dark:bg-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'border border-surface-500 dark:border-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain - }, - // Secondary Text Button - { 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain }, - // Secondary Outlined Button - { 'text-surface-500 border border-surface-500 hover:bg-surface-300/20': parent.props.outlined && parent.props.severity === 'secondary' && !parent.props.plain }, - - // Success Button - { - 'text-white dark:text-surface-900': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'bg-green-500 dark:bg-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'border border-green-500 dark:border-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain - }, - // Success Text Button - { 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain }, - // Success Outlined Button - { 'text-green-500 border border-green-500 hover:bg-green-300/20': parent.props.outlined && parent.props.severity === 'success' && !parent.props.plain }, - - // Info Button - { - 'text-white dark:text-surface-900': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'bg-blue-500 dark:bg-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'border border-blue-500 dark:border-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain - }, - // Info Text Button - { 'text-blue-500 dark:text-blue-400': parent.props.text && parent.props.severity === 'info' && !parent.props.plain }, - // Info Outlined Button - { 'text-blue-500 border border-blue-500 hover:bg-blue-300/20 ': parent.props.outlined && parent.props.severity === 'info' && !parent.props.plain }, - - // Warning Button - { - 'text-white dark:text-surface-900': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'bg-orange-500 dark:bg-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'border border-orange-500 dark:border-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain - }, - // Warning Text Button - { 'text-orange-500 dark:text-orange-400': parent.props.text && parent.props.severity === 'warning' && !parent.props.plain }, - // Warning Outlined Button - { 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': parent.props.outlined && parent.props.severity === 'warning' && !parent.props.plain }, - - // Help Button - { - 'text-white dark:text-surface-900': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'bg-purple-500 dark:bg-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'border border-purple-500 dark:border-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain - }, - // Help Text Button - { 'text-purple-500 dark:text-purple-400': parent.props.text && parent.props.severity === 'help' && !parent.props.plain }, - // Help Outlined Button - { 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': parent.props.outlined && parent.props.severity === 'help' && !parent.props.plain }, - - // Danger Button - { - 'text-white dark:text-surface-900': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'bg-red-500 dark:bg-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'border border-red-500 dark:border-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain - }, - // Danger Text Button - { 'text-red-500 dark:text-red-400': parent.props.text && parent.props.severity === 'danger' && !parent.props.plain }, - // Danger Outlined Button - { 'text-red-500 border border-red-500 hover:bg-red-300/20': parent.props.outlined && parent.props.severity === 'danger' && !parent.props.plain }, - - // --- Severity Button States --- - 'focus:outline-none focus:outline-offset-0 focus:ring', - - // Link - { 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50': parent.props.link }, - - // Plain - { 'hover:bg-gray-600 hover:border-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text }, - // Text & Outlined Button - { 'hover:bg-surface-300/20': parent.props.plain && (parent.props.text || parent.props.outlined) }, - - // Primary - { 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - // Text & Outlined Button - { 'hover:bg-primary-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain }, - - // Secondary - { 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-surface-400/50 dark:focus:ring-surface-300/50': parent.props.severity === 'secondary' }, - // Text & Outlined Button - { 'hover:bg-surface-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'secondary' && !parent.props.plain }, - - // Success - { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-green-400/50 dark:focus:ring-green-300/50': parent.props.severity === 'success' }, - // Text & Outlined Button - { 'hover:bg-green-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'success' && !parent.props.plain }, - - // Info - { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-blue-400/50 dark:focus:ring-blue-300/50': parent.props.severity === 'info' }, - // Text & Outlined Button - { 'hover:bg-blue-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'info' && !parent.props.plain }, - - // Warning - { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-orange-400/50 dark:focus:ring-orange-300/50': parent.props.severity === 'warning' }, - // Text & Outlined Button - { 'hover:bg-orange-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'warning' && !parent.props.plain }, - - // Help - { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-purple-400/50 dark:focus:ring-purple-300/50': parent.props.severity === 'help' }, - // Text & Outlined Button - { 'hover:bg-purple-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'help' && !parent.props.plain }, - - // Warning - { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-red-400/50 dark:focus:ring-red-300/50': parent.props.severity === 'danger' }, - // Text & Outlined Button - { 'hover:bg-red-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'danger' && !parent.props.plain }, - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer overflow-hidden select-none' - ] - }), - label: { - class: ['hidden'] - } - }, - menu: { - root: { - class: [ - // Shape - 'rounded-md', - - // Size - 'min-w-[12rem]', - 'py-1', - - // Colors - 'bg-surface-0 dark:bg-surface-700', - 'border border-surface-200 dark:border-surface-700' - ] - }, - menu: { - class: [ - // Spacings and Shape - 'list-none', - 'm-0', - 'p-0', - 'outline-none' - ] - }, - menuitem: { - class: [ - // Position - 'relative' - ] - }, - content: ({ context }) => ({ - class: [ - //Shape - 'rounded-none', - - // Colors - { - 'text-surface-500 dark:text-white/70': !context.focused && !context.active, - 'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active, - 'text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30': context.focused && context.active, - 'text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30': !context.focused && context.active - }, - - // Hover States - { - 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.active, - 'hover:bg-primary-500/50 dark:hover:bg-primary-300/30 text-primary-700 dark:text-surface-0/80': context.active - }, - - // Transitions - 'transition-shadow', - 'duration-200' - ] - }), - action: { - class: [ - 'relative', - // Flexbox - - 'flex', - 'items-center', - - // Spacing - 'py-3', - 'px-5', - - // Color - 'text-surface-700 dark:text-white/80', - - // Misc - 'no-underline', - 'overflow-hidden', - 'cursor-pointer', - 'select-none' - ] - }, - icon: { - class: [ - // Spacing - 'mr-2', - - // Color - 'text-surface-600 dark:text-white/70' - ] - }, - label: { - class: ['leading-none'] - }, - submenuicon: { - class: [ - // Position - 'ml-auto' - ] - }, - submenu: { - class: [ - // Size - 'w-full sm:w-48', - - // Spacing - 'py-1', - 'm-0', - 'list-none', - - // Shape - 'shadow-none sm:shadow-md', - 'border-0', - - // Position - 'static sm:absolute', - 'z-10', - - // Color - 'bg-surface-0 dark:bg-surface-700' - ] - }, - separator: { - class: 'border-t border-surface-200 dark:border-surface-600 my-1' - } - } -}; +export default { + root: ({ props }) => ({ + class: [ + // Flexbox and Position + 'inline-flex', + 'relative', + + // Shape + 'rounded-md', + { 'shadow-lg': props.raised } + ] + }), + button: { + root: ({ parent }) => ({ + class: [ + 'relative', + + // Alignments + 'items-center inline-flex text-center align-bottom justify-center', + + // Sizes & Spacing + 'leading-[normal]', + { + 'px-4 py-3': parent.props.size === null, + 'text-sm py-2 px-3': parent.props.size === 'small', + 'text-xl py-3 px-4': parent.props.size === 'large' + }, + { + 'min-w-12 p-0 py-3': parent.props.label == null && parent.props.icon !== null + }, + + // Shape + 'rounded-r-none', + 'border-r-0', + { 'rounded-l-full': parent.props.rounded }, + { 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded }, + + // Link Button + { 'text-primary-600 bg-transparent border-transparent': parent.props.link }, + + // Plain Button + { 'text-white bg-gray-500 border border-gray-500': parent.props.plain && !parent.props.outlined && !parent.props.text }, + // Plain Text Button + { 'text-surface-500': parent.props.plain && parent.props.text }, + // Plain Outlined Button + { 'text-surface-500 border border-gray-500': parent.props.plain && parent.props.outlined }, + + // Text Button + { 'bg-transparent border-transparent': parent.props.text && !parent.props.plain }, + + // Outlined Button + { 'bg-transparent border': parent.props.outlined && !parent.props.plain }, + + // --- Severity Buttons --- + + // Primary Button + { + 'text-primary-inverse-color': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'bg-primary-color': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'border border-primary-color': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain + }, + // Primary Text Button + { 'text-primary-color': props.text && props.severity === null && !props.plain }, + // Primary Outlined Button + { 'text-primary-color border border-primary-color': props.outlined && props.severity === null && !props.plain }, + + // Secondary Button + { + 'text-white dark:text-surface-900': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'bg-surface-500 dark:bg-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'border border-surface-500 dark:border-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain + }, + // Secondary Text Button + { 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain }, + // Secondary Outlined Button + { 'text-surface-500 border border-surface-500 hover:bg-surface-300/20': parent.props.outlined && parent.props.severity === 'secondary' && !parent.props.plain }, + + // Success Button + { + 'text-white dark:text-surface-900': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'bg-green-500 dark:bg-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'border border-green-500 dark:border-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain + }, + // Success Text Button + { 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain }, + // Success Outlined Button + { 'text-green-500 border border-green-500 hover:bg-green-300/20': parent.props.outlined && parent.props.severity === 'success' && !parent.props.plain }, + + // Info Button + { + 'text-white dark:text-surface-900': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'bg-blue-500 dark:bg-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'border border-blue-500 dark:border-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain + }, + // Info Text Button + { 'text-blue-500 dark:text-blue-400': parent.props.text && parent.props.severity === 'info' && !parent.props.plain }, + // Info Outlined Button + { 'text-blue-500 border border-blue-500 hover:bg-blue-300/20 ': parent.props.outlined && parent.props.severity === 'info' && !parent.props.plain }, + + // Warning Button + { + 'text-white dark:text-surface-900': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'bg-orange-500 dark:bg-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'border border-orange-500 dark:border-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain + }, + // Warning Text Button + { 'text-orange-500 dark:text-orange-400': parent.props.text && parent.props.severity === 'warning' && !parent.props.plain }, + // Warning Outlined Button + { 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': parent.props.outlined && parent.props.severity === 'warning' && !parent.props.plain }, + + // Help Button + { + 'text-white dark:text-surface-900': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'bg-purple-500 dark:bg-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'border border-purple-500 dark:border-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain + }, + // Help Text Button + { 'text-purple-500 dark:text-purple-400': parent.props.text && parent.props.severity === 'help' && !parent.props.plain }, + // Help Outlined Button + { 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': parent.props.outlined && parent.props.severity === 'help' && !parent.props.plain }, + + // Danger Button + { + 'text-white dark:text-surface-900': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'bg-red-500 dark:bg-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'border border-red-500 dark:border-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain + }, + // Danger Text Button + { 'text-red-500 dark:text-red-400': parent.props.text && parent.props.severity === 'danger' && !parent.props.plain }, + // Danger Outlined Button + { 'text-red-500 border border-red-500 hover:bg-red-300/20': parent.props.outlined && parent.props.severity === 'danger' && !parent.props.plain }, + + // --- Severity Button States --- + 'focus:outline-none focus:outline-offset-0 focus:ring', + + // Link + { 'focus:ring-primary-color/50': parent.props.link }, + + // Plain + { 'hover:bg-gray-600 hover:border-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text }, + // Text & Outlined Button + { 'hover:bg-surface-300/20': parent.props.plain && (parent.props.text || parent.props.outlined) }, + + // Primary + { 'hover:bg-primary-hover-color hover:border-primary-hover-color': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + { 'focus:ring-primary-color/50': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + // Text & Outlined Button + { 'hover:bg-primary-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain }, + + // Secondary + { 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + { 'focus:ring-surface-400/50 dark:focus:ring-surface-300/50': parent.props.severity === 'secondary' }, + // Text & Outlined Button + { 'hover:bg-surface-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'secondary' && !parent.props.plain }, + + // Success + { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + { 'focus:ring-green-400/50 dark:focus:ring-green-300/50': parent.props.severity === 'success' }, + // Text & Outlined Button + { 'hover:bg-green-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'success' && !parent.props.plain }, + + // Info + { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + { 'focus:ring-blue-400/50 dark:focus:ring-blue-300/50': parent.props.severity === 'info' }, + // Text & Outlined Button + { 'hover:bg-blue-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'info' && !parent.props.plain }, + + // Warning + { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + { 'focus:ring-orange-400/50 dark:focus:ring-orange-300/50': parent.props.severity === 'warning' }, + // Text & Outlined Button + { 'hover:bg-orange-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'warning' && !parent.props.plain }, + + // Help + { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + { 'focus:ring-purple-400/50 dark:focus:ring-purple-300/50': parent.props.severity === 'help' }, + // Text & Outlined Button + { 'hover:bg-purple-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'help' && !parent.props.plain }, + + // Warning + { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + { 'focus:ring-red-400/50 dark:focus:ring-red-300/50': parent.props.severity === 'danger' }, + // Text & Outlined Button + { 'hover:bg-red-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'danger' && !parent.props.plain }, + + // Transitions + 'transition duration-200 ease-in-out', + + // Misc + 'cursor-pointer overflow-hidden select-none' + ] + }), + icon: { + class: [ + // Margins + 'mr-2' + ] + } + }, + menubutton: { + root: ({ parent }) => ({ + class: [ + 'relative', + // Alignments + 'items-center inline-flex text-center align-bottom justify-center', + + // Sizes & Spacing + 'leading-[normal]', + { + 'px-4 py-3': parent.props.size === null, + 'text-sm py-2 px-3': parent.props.size === 'small', + 'text-xl py-3 px-4': parent.props.size === 'large' + }, + { + 'min-w-12 p-0 py-3': parent.props.label == null && parent.props.icon !== null + }, + + // Shape + 'rounded-l-none', + { 'rounded-l-full': parent.props.rounded }, + { 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded }, + + // Link Button + { 'text-primary-600 bg-transparent border-transparent': parent.props.link }, + + // Plain Button + { 'text-white bg-gray-500 border border-gray-500': parent.props.plain && !parent.props.outlined && !parent.props.text }, + // Plain Text Button + { 'text-surface-500': parent.props.plain && parent.props.text }, + // Plain Outlined Button + { 'text-surface-500 border border-gray-500': parent.props.plain && parent.props.outlined }, + + // Text Button + { 'bg-transparent border-transparent': parent.props.text && !parent.props.plain }, + + // Outlined Button + { 'bg-transparent border': parent.props.outlined && !parent.props.plain }, + + // --- Severity Buttons --- + + // Primary Button + { + 'text-primary-inverse-color': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'bg-primary-color': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'border border-primary-color': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain + }, + // Primary Text Button + { 'text-primary-color': props.text && props.severity === null && !props.plain }, + // Primary Outlined Button + { 'text-primary-color border border-primary-color': props.outlined && props.severity === null && !props.plain }, + + // Secondary Button + { + 'text-white dark:text-surface-900': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'bg-surface-500 dark:bg-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'border border-surface-500 dark:border-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain + }, + // Secondary Text Button + { 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain }, + // Secondary Outlined Button + { 'text-surface-500 border border-surface-500 hover:bg-surface-300/20': parent.props.outlined && parent.props.severity === 'secondary' && !parent.props.plain }, + + // Success Button + { + 'text-white dark:text-surface-900': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'bg-green-500 dark:bg-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'border border-green-500 dark:border-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain + }, + // Success Text Button + { 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain }, + // Success Outlined Button + { 'text-green-500 border border-green-500 hover:bg-green-300/20': parent.props.outlined && parent.props.severity === 'success' && !parent.props.plain }, + + // Info Button + { + 'text-white dark:text-surface-900': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'bg-blue-500 dark:bg-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'border border-blue-500 dark:border-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain + }, + // Info Text Button + { 'text-blue-500 dark:text-blue-400': parent.props.text && parent.props.severity === 'info' && !parent.props.plain }, + // Info Outlined Button + { 'text-blue-500 border border-blue-500 hover:bg-blue-300/20 ': parent.props.outlined && parent.props.severity === 'info' && !parent.props.plain }, + + // Warning Button + { + 'text-white dark:text-surface-900': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'bg-orange-500 dark:bg-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'border border-orange-500 dark:border-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain + }, + // Warning Text Button + { 'text-orange-500 dark:text-orange-400': parent.props.text && parent.props.severity === 'warning' && !parent.props.plain }, + // Warning Outlined Button + { 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': parent.props.outlined && parent.props.severity === 'warning' && !parent.props.plain }, + + // Help Button + { + 'text-white dark:text-surface-900': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'bg-purple-500 dark:bg-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'border border-purple-500 dark:border-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain + }, + // Help Text Button + { 'text-purple-500 dark:text-purple-400': parent.props.text && parent.props.severity === 'help' && !parent.props.plain }, + // Help Outlined Button + { 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': parent.props.outlined && parent.props.severity === 'help' && !parent.props.plain }, + + // Danger Button + { + 'text-white dark:text-surface-900': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'bg-red-500 dark:bg-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'border border-red-500 dark:border-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain + }, + // Danger Text Button + { 'text-red-500 dark:text-red-400': parent.props.text && parent.props.severity === 'danger' && !parent.props.plain }, + // Danger Outlined Button + { 'text-red-500 border border-red-500 hover:bg-red-300/20': parent.props.outlined && parent.props.severity === 'danger' && !parent.props.plain }, + + // --- Severity Button States --- + 'focus:outline-none focus:outline-offset-0 focus:ring', + + // Link + { 'focus:ring-primary-color/50': parent.props.link }, + + // Plain + { 'hover:bg-gray-600 hover:border-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text }, + // Text & Outlined Button + { 'hover:bg-surface-300/20': parent.props.plain && (parent.props.text || parent.props.outlined) }, + + // Primary + { 'hover:bg-primary-hover-color hover:border-primary-hover-color': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + { 'focus:ring-primary-color/50': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + // Text & Outlined Button + { 'hover:bg-primary-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain }, + + // Secondary + { 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + { 'focus:ring-surface-400/50 dark:focus:ring-surface-300/50': parent.props.severity === 'secondary' }, + // Text & Outlined Button + { 'hover:bg-surface-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'secondary' && !parent.props.plain }, + + // Success + { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + { 'focus:ring-green-400/50 dark:focus:ring-green-300/50': parent.props.severity === 'success' }, + // Text & Outlined Button + { 'hover:bg-green-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'success' && !parent.props.plain }, + + // Info + { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + { 'focus:ring-blue-400/50 dark:focus:ring-blue-300/50': parent.props.severity === 'info' }, + // Text & Outlined Button + { 'hover:bg-blue-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'info' && !parent.props.plain }, + + // Warning + { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + { 'focus:ring-orange-400/50 dark:focus:ring-orange-300/50': parent.props.severity === 'warning' }, + // Text & Outlined Button + { 'hover:bg-orange-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'warning' && !parent.props.plain }, + + // Help + { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + { 'focus:ring-purple-400/50 dark:focus:ring-purple-300/50': parent.props.severity === 'help' }, + // Text & Outlined Button + { 'hover:bg-purple-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'help' && !parent.props.plain }, + + // Warning + { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + { 'focus:ring-red-400/50 dark:focus:ring-red-300/50': parent.props.severity === 'danger' }, + // Text & Outlined Button + { 'hover:bg-red-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'danger' && !parent.props.plain }, + + // Transitions + 'transition duration-200 ease-in-out', + + // Misc + 'cursor-pointer overflow-hidden select-none' + ] + }), + label: { + class: ['hidden'] + } + }, + menu: { + root: { + class: [ + // Shape + 'rounded-md', + + // Size + 'min-w-[12rem]', + 'py-1', + + // Colors + 'bg-surface-0 dark:bg-surface-700', + 'border border-surface-200 dark:border-surface-700' + ] + }, + menu: { + class: [ + // Spacings and Shape + 'list-none', + 'm-0', + 'p-0', + 'outline-none' + ] + }, + menuitem: { + class: [ + // Position + 'relative' + ] + }, + content: ({ context }) => ({ + class: [ + //Shape + 'rounded-none', + + // Colors + { + 'text-surface-500 dark:text-white/70': !context.focused && !context.active, + 'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active, + 'text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30': context.focused && context.active, + 'text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30': !context.focused && context.active + }, + + // Hover States + { + 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.active, + 'hover:bg-primary-500/50 dark:hover:bg-primary-300/30 text-primary-700 dark:text-surface-0/80': context.active + }, + + // Transitions + 'transition-shadow', + 'duration-200' + ] + }), + action: { + class: [ + 'relative', + // Flexbox + + 'flex', + 'items-center', + + // Spacing + 'py-3', + 'px-5', + + // Color + 'text-surface-700 dark:text-white/80', + + // Misc + 'no-underline', + 'overflow-hidden', + 'cursor-pointer', + 'select-none' + ] + }, + icon: { + class: [ + // Spacing + 'mr-2', + + // Color + 'text-surface-600 dark:text-white/70' + ] + }, + label: { + class: ['leading-none'] + }, + submenuicon: { + class: [ + // Position + 'ml-auto' + ] + }, + submenu: { + class: [ + // Size + 'w-full sm:w-48', + + // Spacing + 'py-1', + 'm-0', + 'list-none', + + // Shape + 'shadow-none sm:shadow-md', + 'border-0', + + // Position + 'static sm:absolute', + 'z-10', + + // Color + 'bg-surface-0 dark:bg-surface-700' + ] + }, + separator: { + class: 'border-t border-surface-200 dark:border-surface-600 my-1' + } + } +};