From 081791eec7f813e6d73e1542dcb2813faa1f49a8 Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Mon, 19 Feb 2024 14:16:03 +0100
Subject: [PATCH] feat(ButtonClose): add contrast colors

---
 .../button-close/button-close.config.ts       | 36 +++++++++++++++++++
 .../button-close/button-close.stories.ts      |  2 ++
 .../button-close/button-close.types.ts        |  2 ++
 .../button-close/button-close.variants.ts     |  2 ++
 src/plugins/components/button-close/index.ts  | 22 ++++++++++++
 5 files changed, 64 insertions(+)

diff --git a/src/plugins/components/button-close/button-close.config.ts b/src/plugins/components/button-close/button-close.config.ts
index 803b26c..aa81c3a 100644
--- a/src/plugins/components/button-close/button-close.config.ts
+++ b/src/plugins/components/button-close/button-close.config.ts
@@ -45,6 +45,24 @@ export const defaultConfig = {
         },
       },
     },
+    defaultContrast: {
+      background: {
+        base: {
+          light: 'transparent',
+          dark: 'transparent',
+        },
+        hover: {
+          light: 'muted-100',
+          dark: 'muted-900',
+        },
+      },
+      font: {
+        color: {
+          light: 'muted-700',
+          dark: 'muted-50',
+        },
+      },
+    },
     muted: {
       background: {
         base: {
@@ -63,6 +81,24 @@ export const defaultConfig = {
         },
       },
     },
+    mutedContrast: {
+      background: {
+        base: {
+          light: 'muted-100',
+          dark: 'muted-950',
+        },
+        hover: {
+          light: 'muted-50',
+          dark: 'muted-900',
+        },
+      },
+      font: {
+        color: {
+          light: 'muted-700',
+          dark: 'muted-50',
+        },
+      },
+    },
     primary: {
       background: {
         base: {
diff --git a/src/plugins/components/button-close/button-close.stories.ts b/src/plugins/components/button-close/button-close.stories.ts
index f4a129b..dd7e9ce 100644
--- a/src/plugins/components/button-close/button-close.stories.ts
+++ b/src/plugins/components/button-close/button-close.stories.ts
@@ -19,7 +19,9 @@ const meta = {
       control: { type: 'select' },
       options: [
         'default',
+        'default-contrast',
         'muted',
+        'muted-contrast',
         'primary',
         'info',
         'success',
diff --git a/src/plugins/components/button-close/button-close.types.ts b/src/plugins/components/button-close/button-close.types.ts
index 6ceaa8c..bd1663a 100644
--- a/src/plugins/components/button-close/button-close.types.ts
+++ b/src/plugins/components/button-close/button-close.types.ts
@@ -5,7 +5,9 @@ export interface ButtonCloseProps extends Record<string, unknown> {
   size?: 'xs' | 'sm' | 'md' | 'lg'
   color?:
     | 'default'
+    | 'default-contrast'
     | 'muted'
+    | 'muted-contrast'
     | 'primary'
     | 'info'
     | 'success'
diff --git a/src/plugins/components/button-close/button-close.variants.ts b/src/plugins/components/button-close/button-close.variants.ts
index b01140e..8a15629 100644
--- a/src/plugins/components/button-close/button-close.variants.ts
+++ b/src/plugins/components/button-close/button-close.variants.ts
@@ -17,7 +17,9 @@ export const size = {
 
 export const color = {
   default: 'nui-button-default',
+  'default-contrast': 'nui-button-default-contrast',
   muted: 'nui-button-muted',
+  'muted-contrast': 'nui-button-muted-contrast',
   primary: 'nui-button-primary',
   info: 'nui-button-info',
   success: 'nui-button-success',
diff --git a/src/plugins/components/button-close/index.ts b/src/plugins/components/button-close/index.ts
index 23198a6..6745f77 100644
--- a/src/plugins/components/button-close/index.ts
+++ b/src/plugins/components/button-close/index.ts
@@ -86,6 +86,17 @@ export default plugin(({ addComponents, theme }) => {
         [`@apply hover:bg-${config.color.default.background.hover.light} dark:hover:bg-${config.color.default.background.hover.dark}`]:
           {},
       },
+      //Color:default-contrast
+      '&.nui-button-default-contrast': {
+        [`@apply text-${config.color.defaultContrast.font.color.light} dark:text-${config.color.defaultContrast.font.color.dark}`]:
+          {},
+        //Background
+        [`@apply bg-${config.color.defaultContrast.background.base.light} dark:bg-${config.color.defaultContrast.background.base.dark}`]:
+          {},
+        //Background hover
+        [`@apply hover:bg-${config.color.defaultContrast.background.hover.light} dark:hover:bg-${config.color.defaultContrast.background.hover.dark}`]:
+          {},
+      },
       //Color:muted
       '&.nui-button-muted': {
         [`@apply text-${config.color.muted.font.color.light} dark:text-${config.color.muted.font.color.dark}`]:
@@ -97,6 +108,17 @@ export default plugin(({ addComponents, theme }) => {
         [`@apply hover:bg-${config.color.muted.background.hover.light} dark:hover:bg-${config.color.muted.background.hover.dark}`]:
           {},
       },
+      //Color:muted-contrast
+      '&.nui-button-muted-contrast': {
+        [`@apply text-${config.color.mutedContrast.font.color.light} dark:text-${config.color.mutedContrast.font.color.dark}`]:
+          {},
+        //Background
+        [`@apply bg-${config.color.mutedContrast.background.base.light} dark:bg-${config.color.mutedContrast.background.base.dark}`]:
+          {},
+        //Background hover
+        [`@apply hover:bg-${config.color.mutedContrast.background.hover.light} dark:hover:bg-${config.color.mutedContrast.background.hover.dark}`]:
+          {},
+      },
       //Color:primary
       '&.nui-button-primary': {
         [`@apply text-${config.color.primary.font.color.light} dark:text-${config.color.primary.font.color.dark}`]: