feat(Accordion): add color and dotColor props

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

Hide file tree

Showing 6 changed files with 274 additions and 4 deletions.
diff --git a/src/plugins/components/accordion/accordion.component.ts b/src/plugins/components/accordion/accordion.component.ts
@@ -12,6 +12,8 @@ import { Paragraph } from '../paragraph/paragraph.component'
 export const Accordion = ({
   items,
   openItems,
+  color = 'default',
+  dotColor = 'primary',
   rounded,
   exclusive,
   action = 'dot',
@@ -26,6 +28,8 @@ export const Accordion = ({
             'nui-accordion',
             action && variants.action[action],
             rounded && variants.rounded[rounded],
+            color && variants.color[color],
+            action === 'dot' && dotColor && variants.dotColor[dotColor],
             classes?.wrapper,
           ]
             .filter(Boolean)

diff --git a/src/plugins/components/accordion/accordion.config.ts b/src/plugins/components/accordion/accordion.config.ts
@@ -54,6 +54,122 @@ export const defaultConfig = {
       y: '4',
     },
   },
+  color: {
+    default: {
+      background: {
+        base: {
+          light: 'white',
+          dark: 'muted-800',
+        },
+        hover: {
+          light: 'muted-50/60',
+          dark: 'muted-800/60',
+        },
+      },
+      border: {
+        light: 'muted-300',
+        dark: 'muted-700',
+      },
+    },
+    defaultContrast: {
+      background: {
+        base: {
+          light: 'white',
+          dark: 'muted-950',
+        },
+        hover: {
+          light: 'muted-50/60',
+          dark: 'muted-950/60',
+        },
+      },
+      border: {
+        light: 'muted-300',
+        dark: 'muted-800',
+      },
+    },
+    muted: {
+      background: {
+        base: {
+          light: 'muted-100',
+          dark: 'muted-800',
+        },
+        hover: {
+          light: 'muted-100/60',
+          dark: 'muted-800/60',
+        },
+      },
+      border: {
+        light: 'muted-200',
+        dark: 'muted-700',
+      },
+    },
+    mutedContrast: {
+      background: {
+        base: {
+          light: 'muted-100',
+          dark: 'muted-950',
+        },
+        hover: {
+          light: 'muted-100/60',
+          dark: 'muted-950/60',
+        },
+      },
+      border: {
+        light: 'muted-200',
+        dark: 'muted-800',
+      },
+    },
+  },
+  dotColor: {
+    default: {
+      background: {
+        light: 'muted-400',
+        dark: 'muted-700',
+      },
+    },
+    primary: {
+      background: {
+        light: 'primary-500',
+        dark: 'primary-500',
+      },
+    },
+    info: {
+      background: {
+        light: 'info-500',
+        dark: 'info-500',
+      },
+    },
+    success: {
+      background: {
+        light: 'success-500',
+        dark: 'success-500',
+      },
+    },
+    warning: {
+      background: {
+        light: 'warning-500',
+        dark: 'warning-500',
+      },
+    },
+    danger: {
+      background: {
+        light: 'danger-500',
+        dark: 'danger-500',
+      },
+    },
+    dark: {
+      background: {
+        light: 'muted-900',
+        dark: 'muted-100',
+      },
+    },
+    black: {
+      background: {
+        light: 'black',
+        dark: 'white',
+      },
+    },
+  },
   icon: {
     wrapper: {
       size: '8',

diff --git a/src/plugins/components/accordion/accordion.stories.ts b/src/plugins/components/accordion/accordion.stories.ts
@@ -20,6 +20,25 @@ const meta = {
       options: ['dot', 'chevron', 'plus'],
       defaultValue: 'dot',
     },
+    color: {
+      control: { type: 'select' },
+      options: ['default', 'default-contrast', 'muted', 'muted-contrast'],
+      defaultValue: 'default',
+    },
+    dotColor: {
+      control: { type: 'select' },
+      options: [
+        'default',
+        'primary',
+        'info',
+        'success',
+        'warning',
+        'danger',
+        'dark',
+        'black',
+      ],
+      defaultValue: 'default',
+    },
     rounded: {
       control: { type: 'select' },
       options: ['straight', 'rounded', 'smooth', 'curved'],

diff --git a/src/plugins/components/accordion/accordion.types.ts b/src/plugins/components/accordion/accordion.types.ts
@@ -7,6 +7,16 @@ export interface AccordionProps extends Record<string, unknown> {
   }[]
   openItems?: number[]
   exclusive?: boolean
+  color?: 'default' | 'default-contrast' | 'muted' | 'muted-contrast'
+  dotColor?:
+    | 'default'
+    | 'primary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'dark'
+    | 'black'
   rounded?: 'none' | 'sm' | 'md' | 'lg'
   action?: 'dot' | 'chevron' | 'plus'
   classes?: {

diff --git a/src/plugins/components/accordion/accordion.variants.ts b/src/plugins/components/accordion/accordion.variants.ts
@@ -1,5 +1,23 @@
 import type { AccordionVariant } from './accordion.types'
 
+export const color = {
+  default: 'nui-accordion-default',
+  'default-contrast': 'nui-accordion-default-contrast',
+  muted: 'nui-accordion-muted',
+  'muted-contrast': 'nui-accordion-muted-contrast',
+} as const satisfies AccordionVariant<'color'>
+
+export const dotColor = {
+  default: 'nui-dot-default',
+  primary: 'nui-dot-primary',
+  info: 'nui-dot-info',
+  success: 'nui-dot-success',
+  warning: 'nui-dot-warning',
+  danger: 'nui-dot-danger',
+  dark: 'nui-dot-dark',
+  black: 'nui-dot-black',
+} as const satisfies AccordionVariant<'dotColor'>
+
 export const rounded = {
   none: '',
   sm: 'nui-accordion-rounded',

diff --git a/src/plugins/components/accordion/index.ts b/src/plugins/components/accordion/index.ts
@@ -43,10 +43,6 @@ export default plugin(({ addComponents, theme }) => {
         [`@apply bg-${config.icon.dot.background.light} dark:bg-${config.icon.dot.background.dark}`]:
           {},
       },
-      //Inner:dot active
-      '.nui-accordion-detail[open] .nui-accordion-dot': {
-        [`@apply bg-${config.icon.dot.background.active}`]: {},
-      },
       //Inner:summary
       '.nui-accordion-summary': {
         '@apply cursor-pointer list-none outline-none': {},
@@ -109,6 +105,110 @@ export default plugin(({ addComponents, theme }) => {
         [`@apply font-${config.content.font.family} text-${config.content.font.size} text-${config.content.font.color.light} dark:text-${config.content.font.color.dark}`]:
           {},
       },
+      //Color:default
+      '&.nui-accordion-default': {
+        //Background
+        [`@apply bg-${config.color.default.background.base.light} dark:bg-${config.color.default.background.base.dark}`]:
+          {},
+        //Hover
+        [`@apply hover:bg-${config.color.default.background.hover.light} dark:hover:bg-${config.color.default.background.hover.dark}`]:
+          {},
+        //Border
+        [`@apply border border-${config.color.default.border.light} dark:border-${config.color.default.border.dark}`]:
+          {},
+      },
+      //Color:default-contrast
+      '&.nui-accordion-default-contrast': {
+        //Background
+        [`@apply bg-${config.color.defaultContrast.background.base.light} dark:bg-${config.color.defaultContrast.background.base.dark}`]:
+          {},
+        //Hover
+        [`@apply hover:bg-${config.color.defaultContrast.background.hover.light} dark:hover:bg-${config.color.defaultContrast.background.hover.dark}`]:
+          {},
+        //Border
+        [`@apply border border-${config.color.defaultContrast.border.light} dark:border-${config.color.defaultContrast.border.dark}`]:
+          {},
+      },
+      //Color:muted
+      '&.nui-accordion-muted': {
+        //Background
+        [`@apply bg-${config.color.muted.background.base.light} dark:bg-${config.color.muted.background.base.dark}`]:
+          {},
+        //Hover
+        [`@apply hover:bg-${config.color.muted.background.hover.light} dark:hover:bg-${config.color.muted.background.hover.dark}`]:
+          {},
+        //Border
+        [`@apply border border-${config.color.muted.border.light} dark:border-${config.color.muted.border.dark}`]:
+          {},
+      },
+      //Color:muted-contrast
+      '&.nui-accordion-muted-contrast': {
+        //Background
+        [`@apply bg-${config.color.mutedContrast.background.base.light} dark:bg-${config.color.mutedContrast.background.base.dark}`]:
+          {},
+        //Hover
+        [`@apply hover:bg-${config.color.mutedContrast.background.hover.light} dark:hover:bg-${config.color.mutedContrast.background.hover.dark}`]:
+          {},
+        //Border
+        [`@apply border border-${config.color.mutedContrast.border.light} dark:border-${config.color.mutedContrast.border.dark}`]:
+          {},
+      },
+      //Dot:default
+      '&.nui-dot-default': {
+        '.nui-accordion-detail[open] .nui-accordion-dot': {
+          [`@apply bg-${config.dotColor.default.background.light} dark:bg-${config.dotColor.default.background.dark}`]:
+            {},
+        },
+      },
+      //Dot:primary
+      '&.nui-dot-primary': {
+        '.nui-accordion-detail[open] .nui-accordion-dot': {
+          [`@apply bg-${config.dotColor.primary.background.light} dark:bg-${config.dotColor.primary.background.dark}`]:
+            {},
+        },
+      },
+      //Dot:info
+      '&.nui-dot-info': {
+        '.nui-accordion-detail[open] .nui-accordion-dot': {
+          [`@apply bg-${config.dotColor.info.background.light} dark:bg-${config.dotColor.info.background.dark}`]:
+            {},
+        },
+      },
+      //Dot:success
+      '&.nui-dot-success': {
+        '.nui-accordion-detail[open] .nui-accordion-dot': {
+          [`@apply bg-${config.dotColor.success.background.light} dark:bg-${config.dotColor.success.background.dark}`]:
+            {},
+        },
+      },
+      //Dot:warning
+      '&.nui-dot-warning': {
+        '.nui-accordion-detail[open] .nui-accordion-dot': {
+          [`@apply bg-${config.dotColor.warning.background.light} dark:bg-${config.dotColor.warning.background.dark}`]:
+            {},
+        },
+      },
+      //Dot:danger
+      '&.nui-dot-danger': {
+        '.nui-accordion-detail[open] .nui-accordion-dot': {
+          [`@apply bg-${config.dotColor.danger.background.light} dark:bg-${config.dotColor.danger.background.dark}`]:
+            {},
+        },
+      },
+      //Dot:dark
+      '&.nui-dot-dark': {
+        '.nui-accordion-detail[open] .nui-accordion-dot': {
+          [`@apply bg-${config.dotColor.dark.background.light} dark:bg-${config.dotColor.dark.background.dark}`]:
+            {},
+        },
+      },
+      //Dot:black
+      '&.nui-dot-black': {
+        '.nui-accordion-detail[open] .nui-accordion-dot': {
+          [`@apply bg-${config.dotColor.black.background.light} dark:bg-${config.dotColor.black.background.dark}`]:
+            {},
+        },
+      },
       '&.nui-accordion-dot': {
         '.nui-accordion-header': {
           [`@apply p-${config.content.padding.x}`]: {},
@@ -162,6 +262,9 @@ export default plugin(({ addComponents, theme }) => {
           [`@apply rounded-b-${config.wrapper.rounded.lg}`]: {},
         },
       },
+      '+ .nui-accordion': {
+        [`@apply !border-t-0`]: {},
+      },
     },
   })
 }, config)