From c18252f8fb3614ed27306705d4e536134e9e3ecc Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Wed, 6 Dec 2023 19:15:42 +0100
Subject: [PATCH] feat(ButtonClose): implement new config

---
 .../button-close/button-close.config.ts       | 104 +++++++++---------
 src/plugins/components/button-close/index.ts  |  86 ++++++++++++---
 2 files changed, 124 insertions(+), 66 deletions(-)

diff --git a/src/plugins/components/button-close/button-close.config.ts b/src/plugins/components/button-close/button-close.config.ts
index 4682872..69d3082 100644
--- a/src/plugins/components/button-close/button-close.config.ts
+++ b/src/plugins/components/button-close/button-close.config.ts
@@ -1,6 +1,6 @@
 export const key = 'buttonClose' as const
 
-export const config = {
+export const defaultConfig = {
   size: '9',
   rounded: {
     none: 'rounded-none',
@@ -146,57 +146,57 @@ export const config = {
   },
 }
 
-export const defaultConfig = {
-  size: '9',
-  duration: '300',
-  buttonIcon: {
-    size: '4',
-  },
-  rounded: {
-    smooth: 'md',
-    curved: 'lg',
-    full: 'full',
-  },
-  default: {
-    bgHover: 'muted-100',
-    bgHoverDark: 'muted-700',
-    text: 'muted-700',
-    textDark: 'muted-50',
-  },
-  muted: {
-    bg: 'muted-100',
-    bgHover: 'muted-50',
-    bgDark: 'muted-700',
-    bgHoverDark: 'muted-600',
-    text: 'muted-700',
-    textDark: 'muted-50',
-  },
-  primary: {
-    bg: 'primary-500/10',
-    bgHover: 'primary-500/20',
-    text: 'primary-500',
-  },
-  info: {
-    bg: 'info-500/10',
-    bgHover: 'info-500/20',
-    text: 'info-500',
-  },
-  success: {
-    bg: 'success-500/10',
-    bgHover: 'success-500/20',
-    text: 'success-500',
-  },
-  warning: {
-    bg: 'warning-500/10',
-    bgHover: 'warning-500/20',
-    text: 'warning-500',
-  },
-  danger: {
-    bg: 'danger-500/10',
-    bgHover: 'danger-500/20',
-    text: 'danger-500',
-  },
-}
+// export const defaultConfig = {
+//   size: '9',
+//   duration: '300',
+//   buttonIcon: {
+//     size: '4',
+//   },
+//   rounded: {
+//     smooth: 'md',
+//     curved: 'lg',
+//     full: 'full',
+//   },
+//   default: {
+//     bgHover: 'muted-100',
+//     bgHoverDark: 'muted-700',
+//     text: 'muted-700',
+//     textDark: 'muted-50',
+//   },
+//   muted: {
+//     bg: 'muted-100',
+//     bgHover: 'muted-50',
+//     bgDark: 'muted-700',
+//     bgHoverDark: 'muted-600',
+//     text: 'muted-700',
+//     textDark: 'muted-50',
+//   },
+//   primary: {
+//     bg: 'primary-500/10',
+//     bgHover: 'primary-500/20',
+//     text: 'primary-500',
+//   },
+//   info: {
+//     bg: 'info-500/10',
+//     bgHover: 'info-500/20',
+//     text: 'info-500',
+//   },
+//   success: {
+//     bg: 'success-500/10',
+//     bgHover: 'success-500/20',
+//     text: 'success-500',
+//   },
+//   warning: {
+//     bg: 'warning-500/10',
+//     bgHover: 'warning-500/20',
+//     text: 'warning-500',
+//   },
+//   danger: {
+//     bg: 'danger-500/10',
+//     bgHover: 'danger-500/20',
+//     text: 'danger-500',
+//   },
+// }
 
 export type ButtonCloseConfig = typeof defaultConfig
 export interface ButtonClosePluginConfig {
diff --git a/src/plugins/components/button-close/index.ts b/src/plugins/components/button-close/index.ts
index ea193f4..e7ecc17 100644
--- a/src/plugins/components/button-close/index.ts
+++ b/src/plugins/components/button-close/index.ts
@@ -20,51 +20,109 @@ export default plugin.withOptions(
 
       addComponents({
         [`.${prefix}button-close`]: {
-          [`@apply ${prefix}focus flex h-${config.size} w-${config.size} items-center justify-center transition-colors duration-${config.duration} disabled:opacity-30 cursor-pointer`]:
+          [`@apply ${prefix}focus flex items-center justify-center disabled:opacity-30 cursor-pointer`]:
             {},
-
+          //Size
+          [`@apply h-${config.size} w-${config.size}`]: {},
+          //Transition
+          [`@apply transition-${config.transition.property} duration-${config.transition.duration}`]:
+            {},
+          //Icon
           [`.${prefix}button-icon`]: {
-            [`@apply h-${config.buttonIcon.size} w-${config.buttonIcon.size} fill-current`]:
+            [`@apply h-${config.icon.size} w-${config.icon.size} fill-current`]:
               {},
           },
+          //Rounded:sm
           [`&.${prefix}button-rounded`]: {
-            [`@apply rounded`]: {},
+            [`@apply ${config.rounded.sm}`]: {},
           },
+          //Rounded:md
           [`&.${prefix}button-smooth`]: {
-            [`@apply rounded-${config.rounded.smooth}`]: {},
+            [`@apply ${config.rounded.md}`]: {},
           },
+          //Rounded:lg
           [`&.${prefix}button-curved`]: {
-            [`@apply rounded-${config.rounded.curved}`]: {},
+            [`@apply ${config.rounded.lg}`]: {},
           },
+          //Rounded:full
           [`&.${prefix}button-full`]: {
-            [`@apply rounded-${config.rounded.full}`]: {},
+            [`@apply ${config.rounded.full}`]: {},
           },
+          //Color:default
           [`&.${prefix}button-default`]: {
-            [`@apply hover:bg-${config.default.bgHover} dark:hover:bg-${config.default.bgHoverDark} text-${config.default.text} dark:text-${config.default.textDark}`]:
+            [`@apply text-${config.color.default.font.color.light} dark:text-${config.color.default.font.color.dark}`]:
+              {},
+            //Background
+            [`@apply bg-${config.color.default.background.base.light} dark:bg-${config.color.default.background.base.dark}`]:
+              {},
+            //Background hover
+            [`@apply hover:bg-${config.color.default.background.hover.light} dark:hover:bg-${config.color.default.background.hover.dark}`]:
               {},
           },
+          //Color:muted
           [`&.${prefix}button-muted`]: {
-            [`@apply bg-${config.muted.bg} hover:bg-${config.muted.bgHover} dark:bg-${config.muted.bgDark} dark:hover:bg-${config.muted.bgHoverDark} text-${config.muted.text} dark:text-${config.muted.textDark}`]:
+            [`@apply text-${config.color.muted.font.color.light} dark:text-${config.color.muted.font.color.dark}`]:
+              {},
+            //Background
+            [`@apply bg-${config.color.muted.background.base.light} dark:bg-${config.color.muted.background.base.dark}`]:
+              {},
+            //Background hover
+            [`@apply hover:bg-${config.color.muted.background.hover.light} dark:hover:bg-${config.color.muted.background.hover.dark}`]:
               {},
           },
+          //Color:primary
           [`&.${prefix}button-primary`]: {
-            [`@apply bg-${config.primary.bg} hover:bg-${config.primary.bgHover} text-${config.primary.text}`]:
+            [`@apply text-${config.color.primary.font.color.light} dark:text-${config.color.primary.font.color.dark}`]:
+              {},
+            //Background
+            [`@apply bg-${config.color.primary.background.base.light} dark:bg-${config.color.primary.background.base.dark}`]:
+              {},
+            //Background hover
+            [`@apply hover:bg-${config.color.primary.background.hover.light} dark:hover:bg-${config.color.primary.background.hover.dark}`]:
               {},
           },
+          //Color:info
           [`&.${prefix}button-info`]: {
-            [`@apply bg-${config.info.bg} hover:bg-${config.info.bgHover} text-${config.info.text}`]:
+            [`@apply text-${config.color.info.font.color.light} dark:text-${config.color.info.font.color.dark}`]:
+              {},
+            //Background
+            [`@apply bg-${config.color.info.background.base.light} dark:bg-${config.color.info.background.base.dark}`]:
+              {},
+            //Background hover
+            [`@apply hover:bg-${config.color.info.background.hover.light} dark:hover:bg-${config.color.info.background.hover.dark}`]:
               {},
           },
+          //Color:success
           [`&.${prefix}button-success`]: {
-            [`@apply bg-${config.success.bg} hover:bg-${config.success.bgHover} text-${config.success.text}`]:
+            [`@apply text-${config.color.success.font.color.light} dark:text-${config.color.success.font.color.dark}`]:
+              {},
+            //Background
+            [`@apply bg-${config.color.success.background.base.light} dark:bg-${config.color.success.background.base.dark}`]:
+              {},
+            //Background hover
+            [`@apply hover:bg-${config.color.success.background.hover.light} dark:hover:bg-${config.color.success.background.hover.dark}`]:
               {},
           },
+          //Color:warning
           [`&.${prefix}button-warning`]: {
-            [`@apply bg-${config.warning.bg} hover:bg-${config.warning.bgHover} text-${config.warning.text}`]:
+            [`@apply text-${config.color.warning.font.color.light} dark:text-${config.color.warning.font.color.dark}`]:
+              {},
+            //Background
+            [`@apply bg-${config.color.warning.background.base.light} dark:bg-${config.color.warning.background.base.dark}`]:
+              {},
+            //Background hover
+            [`@apply hover:bg-${config.color.warning.background.hover.light} dark:hover:bg-${config.color.warning.background.hover.dark}`]:
               {},
           },
+          //Color:danger
           [`&.${prefix}button-danger`]: {
-            [`@apply bg-${config.danger.bg} hover:bg-${config.danger.bgHover} text-${config.danger.text}`]:
+            [`@apply text-${config.color.danger.font.color.light} dark:text-${config.color.danger.font.color.dark}`]:
+              {},
+            //Background
+            [`@apply bg-${config.color.danger.background.base.light} dark:bg-${config.color.danger.background.base.dark}`]:
+              {},
+            //Background hover
+            [`@apply hover:bg-${config.color.danger.background.hover.light} dark:hover:bg-${config.color.danger.background.hover.dark}`]:
               {},
           },
         },