From 1d183469bdbca0924c074e112394a4ad1bd58840 Mon Sep 17 00:00:00 2001 From: Driss Chelouati Date: Mon, 4 Dec 2023 15:38:45 +0100 Subject: [PATCH] fix(Button): add missing configs, remove primary-dark from preset --- src/plugins/components/button/index.ts | 489 ++----------------------- src/preset.ts | 2 - 2 files changed, 35 insertions(+), 456 deletions(-) diff --git a/src/plugins/components/button/index.ts b/src/plugins/components/button/index.ts index 474c462..a0f5fc9 100644 --- a/src/plugins/components/button/index.ts +++ b/src/plugins/components/button/index.ts @@ -182,7 +182,7 @@ export const defaultButtonConfig = { primary: { text: { light: 'primary-invert', - dark: 'primary-invert-dark', + dark: 'primary-invert', }, background: { light: { @@ -192,16 +192,16 @@ export const defaultButtonConfig = { focus: 'primary-400', }, dark: { - base: 'primary-dark-500', - hover: 'primary-dark-400', - active: 'primary-dark-500', - focus: 'primary-dark-400', + base: 'primary-500', + hover: 'primary-400', + active: 'primary-500', + focus: 'primary-400', }, }, shadow: { size: 'xl', light: 'primary-500/50', - dark: 'primary-dark-800/50', + dark: 'primary-800/50', }, }, info: { @@ -369,7 +369,7 @@ export const defaultButtonConfig = { primary: { text: { light: 'primary-500', - dark: 'primary-dark-500', + dark: 'primary-500', }, background: { light: { @@ -379,10 +379,10 @@ export const defaultButtonConfig = { focus: 'primary-500/20', }, dark: { - base: 'primary-dark-500/10', - hover: 'primary-dark-500/20', - active: 'primary-dark-500/10', - focus: 'primary-dark-500/20', + base: 'primary-500/10', + hover: 'primary-500/20', + active: 'primary-500/10', + focus: 'primary-500/20', }, }, }, @@ -594,7 +594,7 @@ export const defaultButtonConfig = { focus: 'white', }, dark: { - base: 'primary-dark-500', + base: 'primary-500', hover: 'white', active: 'white', focus: 'white', @@ -609,19 +609,19 @@ export const defaultButtonConfig = { }, dark: { base: 'transparent', - hover: 'primary-dark-500', - active: 'primary-dark-400', - focus: 'primary-dark-500', + hover: 'primary-500', + active: 'primary-400', + focus: 'primary-500', }, }, border: { light: 'primary-500', - dark: 'primary-dark-500', + dark: 'primary-500', }, shadow: { size: 'xl', light: 'primary-500/30', - dark: 'primary-dark-800/30', + dark: 'primary-800/30', }, }, info: { @@ -786,7 +786,7 @@ export const defaultButtonConfig = { size: '3', colors: { primary: 'primary-400', - primaryDark: 'primary-dark-400', + primaryDark: 'primary-400', info: 'info-400', success: 'success-400', warning: 'warning-400', @@ -795,437 +795,6 @@ export const defaultButtonConfig = { }, } -// export const defaultButtonConfig = { -// duration: '300', -// font: 'normal', -// badge: { -// space: '3', -// primary: 'primary-400', -// info: 'info-400', -// success: 'success-400', -// warning: 'warning-400', -// danger: 'danger-400', -// }, -// buttonSmall: { -// text: 'sm', -// iconSize: '3', -// }, -// buttonMedium: { -// text: 'sm', -// iconSize: '4', -// }, -// buttonLarge: { -// text: 'base', -// iconSize: '4', -// }, -// buttonBig: { -// text: 'base', -// iconSize: '5', -// }, -// buttonRounded: 'md', -// buttonSmooth: 'lg', -// buttonCurved: 'xl', -// buttonFull: { -// rounded: 'full', -// badgeSize: '3', -// }, -// buttonSolid: { -// default: { -// text: 'muted-700', -// textDark: 'white', -// bg: 'white', -// bgDark: 'muted-700', -// bgHoverEnabled: 'muted-50', -// bgHoverEnabledDark: 'muted-600', -// bgActiveEnabled: 'white', -// bgActiveEnabledDark: 'muted-700', -// bgFocusVisible: 'muted-50', -// bgFocusVisibleDark: 'muted-600', -// border: 'muted-300', -// borderDark: 'muted-600', -// shadow: { -// size: 'xl', -// enable: 'muted-500/30', -// enableDark: 'muted-800/20', -// }, -// shadowHover: { -// size: 'xl', -// enable: 'muted-300/30', -// enableDark: 'muted-800/20', -// }, -// }, -// lightOrMuted: { -// text: 'muted-500', -// textDark: 'white', -// bg: 'muted-200', -// bgDark: 'muted-700', -// bgHoverEnabled: 'muted-100', -// bgHoverEnabledDark: 'muted-700', -// bgActiveEnabled: 'muted-200', -// bgActiveEnabledDark: 'muted-700', -// bgFocusVisible: 'muted-100', -// bgFocusVisibleDark: 'muted-600', -// border: 'muted-200', -// borderDark: 'muted-700', -// shadow: { -// size: 'xl', -// enable: 'muted-500/30', -// enableDark: 'muted-800/20', -// }, -// shadowHover: { -// size: 'xl', -// enable: 'muted-300/30', -// enableDark: 'muted-800/20', -// }, -// }, -// primary: { -// text: 'white', -// bg: 'primary-500', -// bgDark: 'primary-500', -// bgHoverEnabled: 'primary-400', -// bgHoverEnabledDark: 'primary-400', -// bgActiveEnabled: 'primary-500', -// bgActiveEnabledDark: 'primary-500', -// bgFocusVisible: 'primary-500', -// bgFocusVisibleDark: 'primary-500', -// focusVisibleOutline: 'primary-400/70', -// focusVisibleOutlineDark: 'primary-400/70', -// focusWithinOutline: 'primary-400/70', -// focusWithinOutlineDark: 'primary-400/70', -// shadow: { -// size: 'xl', -// enable: 'primary-500/50', -// enableDark: 'primary-800/20', -// }, -// shadowHover: { -// size: 'xl', -// enable: 'primary-500/50', -// enableDark: 'primary-800/20', -// }, -// }, -// info: { -// text: 'white', -// bg: 'info-500', -// bgDark: 'info-500', -// bgHoverEnabled: 'info-400', -// bgHoverEnabledDark: 'info-400', -// bgActiveEnabled: 'info-500', -// bgActiveEnabledDark: 'info-500', -// bgFocusVisible: 'info-500', -// bgFocusVisibleDark: 'info-500', -// focusVisibleOutline: 'info-400/70', -// focusVisibleOutlineDark: 'info-400/70', -// focusWithinOutline: 'info-400/70', -// focusWithinOutlineDark: 'info-400/70', -// shadow: { -// size: 'xl', -// enable: 'info-500/50', -// enableDark: 'info-800/20', -// }, -// shadowHover: { -// size: 'xl', -// enable: 'info-500/50', -// enableDark: 'info-800/20', -// }, -// }, -// success: { -// text: 'white', -// bg: 'success-500', -// bgDark: 'success-500', -// bgHoverEnabled: 'success-400', -// bgHoverEnabledDark: 'success-400', -// bgActiveEnabled: 'success-500', -// bgActiveEnabledDark: 'success-500', -// bgFocusVisible: 'success-500', -// bgFocusVisibleDark: 'success-500', -// focusVisibleOutline: 'success-400/70', -// focusVisibleOutlineDark: 'success-400/70', -// focusWithinOutline: 'success-400/70', -// focusWithinOutlineDark: 'success-400/70', -// shadow: { -// size: 'xl', -// enable: 'success-500/50', -// enableDark: 'success-800/20', -// }, -// shadowHover: { -// size: 'xl', -// enable: 'success-500/50', -// enableDark: 'success-800/20', -// }, -// }, -// warning: { -// text: 'white', -// bg: 'warning-500', -// bgDark: 'warning-500', -// bgHoverEnabled: 'warning-400', -// bgHoverEnabledDark: 'warning-400', -// bgActiveEnabled: 'warning-500', -// bgActiveEnabledDark: 'warning-500', -// bgFocusVisible: 'warning-500', -// bgFocusVisibleDark: 'warning-500', -// focusVisibleOutline: 'warning-400/70', -// focusVisibleOutlineDark: 'warning-400/70', -// focusWithinOutline: 'warning-400/70', -// focusWithinOutlineDark: 'warning-400/70', -// shadow: { -// size: 'xl', -// enable: 'warning-500/50', -// enableDark: 'warning-800/20', -// }, -// shadowHover: { -// size: 'xl', -// enable: 'warning-500/50', -// enableDark: 'warning-800/20', -// }, -// }, -// danger: { -// text: 'white', -// bg: 'danger-500', -// bgDark: 'danger-500', -// bgHoverEnabled: 'danger-400', -// bgHoverEnabledDark: 'danger-400', -// bgActiveEnabled: 'danger-500', -// bgActiveEnabledDark: 'danger-500', -// bgFocusVisible: 'danger-500', -// bgFocusVisibleDark: 'danger-500', -// focusVisibleOutline: 'danger-400/70', -// focusVisibleOutlineDark: 'danger-400/70', -// focusWithinOutline: 'danger-400/70', -// focusWithinOutlineDark: 'danger-400/70', -// shadow: { -// size: 'xl', -// enable: 'danger-500/50', -// enableDark: 'danger-800/20', -// }, -// shadowHover: { -// size: 'xl', -// enable: 'danger-500/50', -// enableDark: 'danger-800/20', -// }, -// }, -// }, -// buttonPastel: { -// defaultOrMuted: { -// text: 'muted-800', -// textDark: 'muted-100', -// bg: 'muted-500/10', -// bgHoverEnabled: 'muted-500/20', -// bgActiveEnabled: 'muted-500/10', -// bgFocusVisible: 'muted-500/20', -// }, -// light: { -// text: 'muted-800', -// textDark: 'muted-100', -// bg: 'white/30', -// bgDark: 'white/20', -// bgHoverEnabled: 'white/20', -// bgHoverEnabledDark: 'white/10', -// bgActiveEnabled: 'white/20', -// bgActiveEnabledDark: 'white/10', -// bgFocusVisible: 'white/20', -// bgFocusVisibleDark: 'white/10', -// }, -// primary: { -// text: 'primary-500', -// bg: 'primary-500/10', -// bgHoverEnabled: 'primary-500/20', -// bgActiveEnabled: 'primary-500/10', -// bgFocusVisible: 'primary-500/20', -// }, -// info: { -// text: 'info-500', -// bg: 'info-500/10', -// bgHoverEnabled: 'info-500/20', -// bgActiveEnabled: 'info-500/10', -// bgFocusVisible: 'info-500/20', -// }, -// success: { -// text: 'success-500', -// bg: 'success-500/10', -// bgHoverEnabled: 'success-500/20', -// bgActiveEnabled: 'success-500/10', -// bgFocusVisible: 'success-500/20', -// }, -// warning: { -// text: 'warning-500', -// bg: 'warning-500/10', -// bgHoverEnabled: 'warning-500/20', -// bgActiveEnabled: 'warning-500/10', -// bgFocusVisible: 'warning-500/20', -// }, -// danger: { -// text: 'danger-500', -// bg: 'danger-500/10', -// bgHoverEnabled: 'danger-500/20', -// bgActiveEnabled: 'danger-500/10', -// bgFocusVisible: 'danger-500/20', -// }, -// }, -// buttonOutline: { -// default: { -// text: 'muted-500', -// textDark: 'white', -// hoverEnabled: 'white', -// hoverEnabledDark: 'muted-800', -// bgHoverEnabled: 'muted-500', -// bgHoverEnabledDark: 'white', -// focusWithin: 'muted-500', -// focusWithinDark: 'white', -// focusVisible: 'muted-500', -// focusVisibleDark: 'white', -// bgFocusVisible: 'muted-500', -// bgFocusVisibleDark: 'white', -// textFocusVisible: 'white', -// textFocusVisibleDark: 'muted-800', -// textActiveEnabled: 'muted-800', -// textActiveEnabledDark: 'muted-800', -// bgActiveEnabled: 'muted-400', -// bgActiveEnabledDark: 'white/80', -// border: 'muted-500', -// borderDark: 'white', -// shadowHover: { -// size: 'xl', -// enable: 'muted-500/50', -// enableDark: 'muted-800/20', -// }, -// }, -// light: { -// text: 'white', -// hoverEnabled: 'muted-800', -// bgHoverEnabled: 'white', -// focusWithin: 'white', -// focusVisible: 'white', -// bgFocusVisible: 'white', -// textFocusVisible: 'muted-800', -// textActiveEnabled: 'muted-800', -// bgActiveEnabled: 'muted-800', -// border: 'white', -// shadowHover: { -// size: 'xl', -// enable: 'muted-500/50', -// enableDark: 'muted-800/20', -// }, -// }, -// muted: { -// text: 'muted-400', -// textDark: 'white', -// hoverEnabled: 'white', -// hoverEnabledDark: 'muted-800', -// bgHoverEnabled: 'muted-300', -// bgHoverEnabledDark: 'white', -// focusWithin: 'muted-300', -// focusWithinDark: 'white', -// focusVisible: 'muted-300', -// focusVisibleDark: 'white', -// bgFocusVisible: 'muted-300', -// bgFocusVisibleDark: 'white', -// textFocusVisible: 'white', -// textFocusVisibleDark: 'muted-800', -// textActiveEnabled: 'muted-800', -// textActiveEnabledDark: 'muted-800', -// bgActiveEnabled: 'muted-400', -// bgActiveEnabledDark: 'white/80', -// border: 'muted-300', -// borderDark: 'white', -// shadowHover: { -// size: 'xl', -// enable: 'muted-500/50', -// enableDark: 'muted-800/20', -// }, -// }, -// primary: { -// text: 'primary-500', -// textDark: 'white', -// hoverEnabled: 'white', -// bgHoverEnabled: 'primary-500', -// focusWithin: 'primary-400/70', -// focusVisible: 'primary-400/70', -// bgFocusVisible: 'primary-500', -// textFocusVisible: 'white', -// textActiveEnabled: 'white', -// bgActiveEnabled: 'primary-400', -// border: 'primary-500', -// shadowHover: { -// size: 'xl', -// enable: 'primary-500/30', -// enableDark: 'primary-800/20', -// }, -// }, -// info: { -// text: 'info-500', -// textDark: 'white', -// hoverEnabled: 'white', -// bgHoverEnabled: 'info-500', -// focusWithin: 'info-400/70', -// focusVisible: 'info-400/70', -// bgFocusVisible: 'info-500', -// textFocusVisible: 'white', -// textActiveEnabled: 'white', -// bgActiveEnabled: 'info-400', -// border: 'info-500', -// shadowHover: { -// size: 'xl', -// enable: 'info-500/30', -// enableDark: 'info-800/20', -// }, -// }, -// success: { -// text: 'success-500', -// textDark: 'white', -// hoverEnabled: 'white', -// bgHoverEnabled: 'success-500', -// focusWithin: 'success-400/70', -// focusVisible: 'success-400/70', -// bgFocusVisible: 'success-500', -// textFocusVisible: 'white', -// textActiveEnabled: 'white', -// bgActiveEnabled: 'success-400', -// border: 'success-500', -// shadowHover: { -// size: 'xl', -// enable: 'success-500/30', -// enableDark: 'success-800/20', -// }, -// }, -// warning: { -// text: 'warning-500', -// textDark: 'white', -// hoverEnabled: 'white', -// bgHoverEnabled: 'warning-500', -// focusWithin: 'warning-400/70', -// focusVisible: 'warning-400/70', -// bgFocusVisible: 'warning-500', -// textFocusVisible: 'white', -// textActiveEnabled: 'white', -// bgActiveEnabled: 'warning-400', -// border: 'warning-500', -// shadowHover: { -// size: 'xl', -// enable: 'warning-500/30', -// enableDark: 'warning-800/20', -// }, -// }, -// danger: { -// text: 'danger-500', -// textDark: 'white', -// hoverEnabled: 'white', -// bgHoverEnabled: 'danger-500', -// focusWithin: 'danger-400/70', -// focusVisible: 'danger-400/70', -// bgFocusVisible: 'danger-500', -// textFocusVisible: 'white', -// textActiveEnabled: 'white', -// bgActiveEnabled: 'danger-400', -// border: 'danger-500', -// shadowHover: { -// size: 'xl', -// enable: 'danger-500/30', -// enableDark: 'danger-800/20', -// }, -// }, -// }, -// } - export default plugin.withOptions( function (options: PluginOption) { let { prefix } = defu(options, defaultPluginOptions) @@ -1241,9 +810,18 @@ export default plugin.withOptions( addComponents({ [`.${prefix}button`]: { - [`@apply relative font-${config.font.family} font-${config.font.weight} leading-5 no-underline inline-flex justify-center items-center space-x-1 ${prefix}focus transition-${config.transition.property} duration-${config.transition.duration} disabled:opacity-60 disabled:cursor-not-allowed hover:shadow-none`]: + // #region Base + [`@apply relative inline-flex justify-center items-center space-x-1`]: + {}, + //Text styles + [`@apply font-${config.font.family} font-${config.font.weight} leading-5 no-underline`]: + {}, + //State styles + [`@apply ${prefix}focus transition-${config.transition.property} duration-${config.transition.duration} disabled:opacity-60 disabled:cursor-not-allowed hover:shadow-none`]: {}, + // #endregion + // #region Badge [`.${prefix}button-badge`]: { [`@apply flex absolute h-${config.badge.size} w-${config.badge.size} top-0 -end-1 -mt-1`]: {}, @@ -1304,6 +882,7 @@ export default plugin.withOptions( }, }, }, + // #endregion // #region Loading [`&.${prefix}button-loading`]: { @@ -1313,7 +892,8 @@ export default plugin.withOptions( // #region Sizes [`&.${prefix}button-small`]: { - [`@apply h-8 px-3 py-1 text-${config.size.small.button.text}`]: {}, + [`@apply h-${config.size.small.button.height} px-${config.size.small.button.padding.x} py-${config.size.small.button.padding.y} text-${config.size.small.button.text}`]: + {}, [`.${prefix}button-icon`]: { [`@apply w-${config.size.small.icon.size} h-${config.size.small.icon.size}`]: @@ -1321,7 +901,7 @@ export default plugin.withOptions( }, }, [`&.${prefix}button-medium`]: { - [`@apply h-10 px-5 py-2 text-${config.size.medium.button.text}`]: + [`@apply h-${config.size.medium.button.height} px-${config.size.medium.button.padding.x} py-${config.size.medium.button.padding.y} text-${config.size.medium.button.text}`]: {}, [`.${prefix}button-icon`]: { @@ -1330,7 +910,8 @@ export default plugin.withOptions( }, }, [`&.${prefix}button-large`]: { - [`@apply h-12 px-6 py-2 text-${config.size.large.button.text}`]: {}, + [`@apply h-${config.size.large.button.height} px-${config.size.large.button.padding.x} py-${config.size.large.button.padding.y} text-${config.size.large.button.text}`]: + {}, [`.${prefix}button-icon`]: { [`@apply w-${config.size.large.icon.size} h-${config.size.large.icon.size}`]: @@ -1338,7 +919,7 @@ export default plugin.withOptions( }, }, [`&.${prefix}button-xlarge`]: { - [`@apply h-14 px-10 py-4 text-${config.size.xlarge.button.text}`]: + [`@apply h-${config.size.xlarge.button.height} px-${config.size.xlarge.button.padding.x} py-${config.size.xlarge.button.padding.y} text-${config.size.xlarge.button.text}`]: {}, [`.${prefix}button-icon`]: { diff --git a/src/preset.ts b/src/preset.ts index 9502e05..b138602 100644 --- a/src/preset.ts +++ b/src/preset.ts @@ -42,8 +42,6 @@ export function createPreset(options: PluginOption = {}) { colors: { primary: colors.violet, 'primary-invert': colors.white, - 'primary-dark': colors.violet, - 'primary-invert-dark': colors.white, muted: colors.slate, info: colors.sky, success: colors.teal,