feat(ButtonClose): add contrast colors

shuriken-ui · Feb 19, 2024 · 081791e · 081791e
1 parent be3e35e
commit 081791e
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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}`]: