feat(ButtonAction): add new colors and contrast colors

shuriken-ui · Feb 19, 2024 · c8dcd8a · c8dcd8a
1 parent 15930a6
commit c8dcd8a
Show file tree

Hide file tree

Showing 6 changed files with 267 additions and 0 deletions.
diff --git a/src/plugins/components/button-action/button-action.config.ts b/src/plugins/components/button-action/button-action.config.ts
@@ -42,6 +42,32 @@ export const defaultConfig = {
         dark: 'muted-600',
       },
     },
+    defaultContrast: {
+      font: {
+        color: {
+          light: 'muted-700',
+          dark: 'muted-100',
+        },
+      },
+      background: {
+        base: {
+          light: 'white',
+          dark: 'muted-950',
+        },
+        hover: {
+          light: 'muted-50',
+          dark: 'muted-900',
+        },
+        active: {
+          light: 'muted-100',
+          dark: 'muted-950',
+        },
+      },
+      border: {
+        light: 'muted-300',
+        dark: 'muted-800',
+      },
+    },
     muted: {
       font: {
         color: {
@@ -68,6 +94,110 @@ export const defaultConfig = {
         dark: 'muted-700/40',
       },
     },
+    mutedContrast: {
+      font: {
+        color: {
+          light: 'muted-500',
+          dark: 'muted-100',
+        },
+      },
+      background: {
+        base: {
+          light: 'muted-200',
+          dark: 'muted-950',
+        },
+        hover: {
+          light: 'muted-100',
+          dark: 'muted-900',
+        },
+        active: {
+          light: 'muted-200/50',
+          dark: 'muted-950',
+        },
+      },
+      border: {
+        light: 'muted-200',
+        dark: 'muted-800',
+      },
+    },
+    light: {
+      font: {
+        color: {
+          light: 'muted-500',
+          dark: 'muted-100',
+        },
+      },
+      background: {
+        base: {
+          light: 'muted-200',
+          dark: 'muted-700',
+        },
+        hover: {
+          light: 'muted-100',
+          dark: 'muted-600',
+        },
+        active: {
+          light: 'muted-200',
+          dark: 'muted-700',
+        },
+      },
+      border: {
+        light: 'muted-200',
+        dark: 'muted-700',
+      },
+    },
+    dark: {
+      font: {
+        color: {
+          light: 'muted-100',
+          dark: 'muted-900',
+        },
+      },
+      background: {
+        base: {
+          light: 'muted-900',
+          dark: 'muted-100',
+        },
+        hover: {
+          light: 'muted-800',
+          dark: 'muted-50',
+        },
+        active: {
+          light: 'muted-900',
+          dark: 'muted-100',
+        },
+      },
+      border: {
+        light: 'muted-900',
+        dark: 'muted-100',
+      },
+    },
+    black: {
+      font: {
+        color: {
+          light: 'white',
+          dark: 'black',
+        },
+      },
+      background: {
+        base: {
+          light: 'black',
+          dark: 'white',
+        },
+        hover: {
+          light: 'muted-800',
+          dark: 'white/90',
+        },
+        active: {
+          light: 'black',
+          dark: 'white',
+        },
+      },
+      border: {
+        light: 'black',
+        dark: 'white',
+      },
+    },
     primary: {
       font: {
         color: {

diff --git a/src/plugins/components/button-action/button-action.doc.mdx b/src/plugins/components/button-action/button-action.doc.mdx
@@ -44,6 +44,9 @@ Action buttons can have different colors.
   <Story of={ButtonActionStories.ColorSuccess} />
   <Story of={ButtonActionStories.ColorWarning} />
   <Story of={ButtonActionStories.ColorDanger} />
+  <Story of={ButtonActionStories.ColorLight} />
+  <Story of={ButtonActionStories.ColorDark} />
+  <Story of={ButtonActionStories.ColorBlack} />
 </div>
 
 <br />

diff --git a/src/plugins/components/button-action/button-action.stories.ts b/src/plugins/components/button-action/button-action.stories.ts
@@ -24,8 +24,12 @@ const meta = {
       control: { type: 'select' },
       options: [
         'default',
+        'default-contrast',
         'muted',
+        'muted-contrast',
         'light',
+        'dark',
+        'black',
         'primary',
         'info',
         'success',
@@ -170,6 +174,36 @@ export const ColorDanger: Story = {
     rounded: 'sm',
   },
 }
+
+export const ColorLight: Story = {
+  name: 'Color: light',
+  args: {
+    color: 'light',
+    label: 'Button',
+    loading: false,
+    rounded: 'sm',
+  },
+}
+
+export const ColorDark: Story = {
+  name: 'Color: dark',
+  args: {
+    color: 'dark',
+    label: 'Button',
+    loading: false,
+    rounded: 'sm',
+  },
+}
+
+export const ColorBlack: Story = {
+  name: 'Color: black',
+  args: {
+    color: 'black',
+    label: 'Button',
+    loading: false,
+    rounded: 'sm',
+  },
+}
 // #endregion
 
 // #region State: loading

diff --git a/src/plugins/components/button-action/button-action.types.ts b/src/plugins/components/button-action/button-action.types.ts
@@ -6,7 +6,12 @@ export interface ButtonActionProps extends Record<string, unknown> {
   loading?: boolean
   color?:
     | 'default'
+    | 'default-contrast'
     | 'muted'
+    | 'muted-contrast'
+    | 'light'
+    | 'dark'
+    | 'black'
     | 'primary'
     | 'info'
     | 'success'

diff --git a/src/plugins/components/button-action/button-action.variants.ts b/src/plugins/components/button-action/button-action.variants.ts
@@ -10,7 +10,12 @@ export const rounded = {
 
 export const color = {
   default: 'nui-button-default',
+  'default-contrast': 'nui-button-default-contrast',
   muted: 'nui-button-muted',
+  'muted-contrast': 'nui-button-muted-contrast',
+  light: 'nui-button-light',
+  dark: 'nui-button-dark',
+  black: 'nui-button-black',
   primary: 'nui-button-primary',
   info: 'nui-button-info',
   success: 'nui-button-success',

diff --git a/src/plugins/components/button-action/index.ts b/src/plugins/components/button-action/index.ts
@@ -68,6 +68,24 @@ export default plugin(({ addComponents, theme }) => {
         [`@apply border-${config.color.default.border.light} dark:border-${config.color.default.border.dark}`]:
           {},
       },
+      //Color:default-contrast
+      '&.nui-button-default-contrast': {
+        //Font
+        [`@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}`]:
+          {},
+        //Hover
+        [`@apply hover:enabled:bg-${config.color.defaultContrast.background.hover.light} dark:hover:enabled:bg-${config.color.defaultContrast.background.hover.dark}`]:
+          {},
+        //Active
+        [`@apply active:enabled:bg-${config.color.defaultContrast.background.active.light} dark:active:enabled:bg-${config.color.defaultContrast.background.active.dark}`]:
+          {},
+        //Border
+        [`@apply border-${config.color.defaultContrast.border.light} dark:border-${config.color.defaultContrast.border.dark}`]:
+          {},
+      },
       //Color:muted
       '&.nui-button-muted': {
         //Font
@@ -86,6 +104,78 @@ export default plugin(({ addComponents, theme }) => {
         [`@apply border-${config.color.muted.border.light} dark:border-${config.color.muted.border.dark}`]:
           {},
       },
+      //Color:muted-contrast
+      '&.nui-button-muted-contrast': {
+        //Font
+        [`@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}`]:
+          {},
+        //Hover
+        [`@apply hover:enabled:bg-${config.color.mutedContrast.background.hover.light} dark:hover:enabled:bg-${config.color.mutedContrast.background.hover.dark}`]:
+          {},
+        //Active
+        [`@apply active:enabled:bg-${config.color.mutedContrast.background.active.light} dark:active:enabled:bg-${config.color.mutedContrast.background.active.dark}`]:
+          {},
+        //Border
+        [`@apply border-${config.color.mutedContrast.border.light} dark:border-${config.color.mutedContrast.border.dark}`]:
+          {},
+      },
+      //Color:light
+      '&.nui-button-light': {
+        //Font
+        [`@apply text-${config.color.light.font.color.light} dark:text-${config.color.light.font.color.dark}`]:
+          {},
+        //Background
+        [`@apply bg-${config.color.light.background.base.light} dark:bg-${config.color.light.background.base.dark}`]:
+          {},
+        //Hover
+        [`@apply hover:enabled:bg-${config.color.light.background.hover.light} dark:hover:enabled:bg-${config.color.light.background.hover.dark}`]:
+          {},
+        //Active
+        [`@apply active:enabled:bg-${config.color.light.background.active.light} dark:active:enabled:bg-${config.color.light.background.active.dark}`]:
+          {},
+        //Border
+        [`@apply border-${config.color.light.border.light} dark:border-${config.color.light.border.dark}`]:
+          {},
+      },
+      //Color:dark
+      '&.nui-button-dark': {
+        //Font
+        [`@apply text-${config.color.dark.font.color.light} dark:text-${config.color.dark.font.color.dark}`]:
+          {},
+        //Background
+        [`@apply bg-${config.color.dark.background.base.light} dark:bg-${config.color.dark.background.base.dark}`]:
+          {},
+        //Hover
+        [`@apply hover:enabled:bg-${config.color.dark.background.hover.light} dark:hover:enabled:bg-${config.color.dark.background.hover.dark}`]:
+          {},
+        //Active
+        [`@apply active:enabled:bg-${config.color.dark.background.active.light} dark:active:enabled:bg-${config.color.dark.background.active.dark}`]:
+          {},
+        //Border
+        [`@apply border-${config.color.dark.border.light} dark:border-${config.color.dark.border.dark}`]:
+          {},
+      },
+      //Color:black
+      '&.nui-button-black': {
+        //Font
+        [`@apply text-${config.color.black.font.color.light} dark:text-${config.color.black.font.color.dark}`]:
+          {},
+        //Background
+        [`@apply bg-${config.color.black.background.base.light} dark:bg-${config.color.black.background.base.dark}`]:
+          {},
+        //Hover
+        [`@apply hover:enabled:bg-${config.color.black.background.hover.light} dark:hover:enabled:bg-${config.color.black.background.hover.dark}`]:
+          {},
+        //Active
+        [`@apply active:enabled:bg-${config.color.black.background.active.light} dark:active:enabled:bg-${config.color.black.background.active.dark}`]:
+          {},
+        //Border
+        [`@apply border-${config.color.black.border.light} dark:border-${config.color.black.border.dark}`]:
+          {},
+      },
       //Color:primary
       '&.nui-button-primary': {
         //Font