feat(Card): redesign configuration and implementation, rename shape p…

…rop to rounded
shuriken-ui · Dec 6, 2023 · 6ecbbf5 · 6ecbbf5
1 parent eed398a
commit 6ecbbf5
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 91 deletions.
diff --git a/src/plugins/components/card/card.component.ts b/src/plugins/components/card/card.component.ts
@@ -11,7 +11,7 @@ export const Card = ({
   color = 'white',
   elevated,
   elevatedHover,
-  shape = 'rounded',
+  rounded = 'sm',
   classes,
   children,
   ...attrs
@@ -21,7 +21,7 @@ export const Card = ({
       class=${[
         'nui-card',
         color && variants.color[color],
-        shape && variants.shape[shape],
+        rounded && variants.rounded[rounded],
         elevated && 'nui-card-shadow',
         elevatedHover && 'nui-card-shadow-hover',
         classes?.wrapper,

diff --git a/src/plugins/components/card/card.config.ts b/src/plugins/components/card/card.config.ts
@@ -1,7 +1,18 @@
 export const key = 'card' as const
 
-const config = {
+export const defaultConfig = {
   width: 'full',
+  rounded: {
+    none: 'none',
+    sm: 'md',
+    md: 'lg',
+    lg: 'xl',
+  },
+  shadow: {
+    light: 'muted-300/30',
+    dark: 'muted-800/30',
+    size: 'xl',
+  },
   color: {
     white: {
       background: {
@@ -100,70 +111,6 @@ const config = {
   },
 }
 
-export const defaultConfig = {
-  size: 'full',
-  duration: '300',
-  cardWhite: {
-    bg: 'white',
-    bgDark: 'muted-800',
-    border: 'muted-200',
-    borderDark: 'muted-700',
-  },
-  cardWhiteContrast: {
-    bg: 'white',
-    bgDark: 'muted-950',
-    border: 'muted-200',
-    borderDark: 'muted-800',
-  },
-  cardMuted: {
-    bg: 'muted-100',
-    bgDark: 'muted-800',
-    border: 'muted-200',
-    borderDark: 'muted-700',
-  },
-  cardMutedContrast: {
-    bg: 'muted-100',
-    bgDark: 'muted-950',
-    border: 'muted-200',
-    borderDark: 'muted-800',
-  },
-  cardPrimary: {
-    bg: 'primary-500/10',
-    border: 'primary-500',
-  },
-  cardInfo: {
-    bg: 'info-500/10',
-    border: 'info-500',
-  },
-  cardSuccess: {
-    bg: 'success-500/10',
-    border: 'success-500',
-  },
-  cardWarning: {
-    bg: 'warning-500/10',
-    border: 'warning-500',
-  },
-  cardDanger: {
-    bg: 'danger-500/10',
-    border: 'danger-500',
-  },
-  rounded: {
-    default: 'md',
-    smooth: 'lg',
-    curved: 'xl',
-  },
-  cardSadow: {
-    color: 'muted-300/30',
-    colorDark: 'muted-800/30',
-    size: 'xl',
-  },
-  cardSadowHover: {
-    color: 'muted-300/30',
-    colorDark: 'muted-800/30',
-    size: 'xl',
-  },
-}
-
 export type CardConfig = typeof defaultConfig
 export interface CardPluginConfig {
   [key]: CardConfig

diff --git a/src/plugins/components/card/card.types.ts b/src/plugins/components/card/card.types.ts
@@ -1,7 +1,7 @@
 import type { PropertyVariant } from '~/types/utils'
 
 export interface CardProps extends Record<string, unknown> {
-  shape?: 'straight' | 'rounded' | 'smooth' | 'curved'
+  rounded?: 'none' | 'sm' | 'md' | 'lg'
   elevated?: boolean
   elevatedHover?: boolean
   color?:

diff --git a/src/plugins/components/card/card.variants.ts b/src/plugins/components/card/card.variants.ts
@@ -1,11 +1,11 @@
 import type { CardVariant } from './card.types'
 
-export const shape = {
-  straight: '',
-  rounded: 'nui-card-rounded',
-  smooth: 'nui-card-smooth',
-  curved: 'nui-card-curved',
-} as const satisfies CardVariant<'shape'>
+export const rounded = {
+  none: '',
+  sm: 'nui-card-rounded',
+  md: 'nui-card-smooth',
+  lg: 'nui-card-curved',
+} as const satisfies CardVariant<'rounded'>
 
 export const color = {
   white: 'nui-card-white',

diff --git a/src/plugins/components/card/index.ts b/src/plugins/components/card/index.ts
@@ -16,63 +16,111 @@ export default plugin.withOptions(
 
       addComponents({
         [`.${prefix}card`]: {
-          [`@apply relative w-${config.size} transition-all duration-${config.duration}`]:
+          //Base
+          [`@apply relative w-${config.width} transition-${config.transition.property} duration-${config.transition.duration}`]:
             {},
-
+          //Color:white
           [`&.${prefix}card-white`]: {
-            [`@apply border bg-${config.cardWhite.bg} border-${config.cardWhite.border} dark:border-${config.cardWhite.borderDark} dark:bg-${config.cardWhite.bgDark}`]:
+            //Border
+            [`@apply border border-${config.color.white.border.light} dark:border-${config.color.white.border.light}`]:
+              {},
+            //Background
+            [`@apply bg-${config.color.white.background.light} dark:bg-${config.color.white.background.dark}`]:
               {},
           },
+          //Color:whiteContrast
           [`&.${prefix}card-white-contrast`]: {
-            [`@apply border bg-${config.cardWhiteContrast.bg} border-${config.cardWhiteContrast.border} dark:border-${config.cardWhiteContrast.borderDark} dark:bg-${config.cardWhiteContrast.bgDark}`]:
+            //Border
+            [`@apply border border-${config.color.whiteContrast.border.light} dark:border-${config.color.whiteContrast.border.light}`]:
+              {},
+            //Background
+            [`@apply bg-${config.color.whiteContrast.background.light} dark:bg-${config.color.whiteContrast.background.dark}`]:
               {},
           },
+          //Color:muted
           [`&.${prefix}card-muted`]: {
-            [`@apply border bg-${config.cardMuted.bg} border-${config.cardMuted.border} dark:border-${config.cardMuted.borderDark} dark:bg-${config.cardMuted.bgDark}`]:
+            //Border
+            [`@apply border border-${config.color.muted.border.light} dark:border-${config.color.muted.border.light}`]:
+              {},
+            //Background
+            [`@apply bg-${config.color.muted.background.light} dark:bg-${config.color.muted.background.dark}`]:
               {},
           },
+          //Color:mutedContrast
           [`&.${prefix}card-muted-contrast`]: {
-            [`@apply border bg-${config.cardMutedContrast.bg} border-${config.cardMutedContrast.border} dark:border-${config.cardMutedContrast.borderDark} dark:bg-${config.cardMutedContrast.bgDark}`]:
+            //Border
+            [`@apply border border-${config.color.mutedContrast.border.light} dark:border-${config.color.mutedContrast.border.light}`]:
+              {},
+            //Background
+            [`@apply bg-${config.color.mutedContrast.background.light} dark:bg-${config.color.mutedContrast.background.dark}`]:
               {},
           },
+          //Color:primary
           [`&.${prefix}card-primary`]: {
-            [`@apply border bg-${config.cardPrimary.bg} border-${config.cardPrimary.border}`]:
+            //Border
+            [`@apply border border-${config.color.primary.border.light} dark:border-${config.color.primary.border.light}`]:
+              {},
+            //Background
+            [`@apply bg-${config.color.primary.background.light} dark:bg-${config.color.primary.background.dark}`]:
               {},
           },
+          //Color:info
           [`&.${prefix}card-info`]: {
-            [`@apply border bg-${config.cardInfo.bg} border-${config.cardInfo.border}`]:
+            //Border
+            [`@apply border border-${config.color.info.border.light} dark:border-${config.color.info.border.light}`]:
+              {},
+            //Background
+            [`@apply bg-${config.color.info.background.light} dark:bg-${config.color.info.background.dark}`]:
               {},
           },
+          //Color:success
           [`&.${prefix}card-success`]: {
-            [`@apply border bg-${config.cardSuccess.bg} border-${config.cardSuccess.border}`]:
+            //Border
+            [`@apply border border-${config.color.success.border.light} dark:border-${config.color.success.border.light}`]:
+              {},
+            //Background
+            [`@apply bg-${config.color.success.background.light} dark:bg-${config.color.success.background.dark}`]:
               {},
           },
+          //Color:warning
           [`&.${prefix}card-warning`]: {
-            [`@apply border bg-${config.cardWarning.bg} border-${config.cardWarning.border}`]:
+            //Border
+            [`@apply border border-${config.color.warning.border.light} dark:border-${config.color.warning.border.light}`]:
+              {},
+            //Background
+            [`@apply bg-${config.color.warning.background.light} dark:bg-${config.color.warning.background.dark}`]:
               {},
           },
+          //Color:danger
           [`&.${prefix}card-danger`]: {
-            [`@apply border bg-${config.cardDanger.bg} border-${config.cardDanger.border}`]:
+            //Border
+            [`@apply border border-${config.color.danger.border.light} dark:border-${config.color.danger.border.light}`]:
+              {},
+            //Background
+            [`@apply bg-${config.color.danger.background.light} dark:bg-${config.color.danger.background.dark}`]:
               {},
           },
+          //Rounded:sm
           [`&.${prefix}card-rounded`]: {
-            [`@apply rounded-${config.rounded.default}`]: {},
+            [`@apply rounded-${config.rounded.sm}`]: {},
           },
+          //Rounded:md
           [`&.${prefix}card-smooth`]: {
-            [`@apply rounded-${config.rounded.smooth}`]: {},
+            [`@apply rounded-${config.rounded.md}`]: {},
           },
+          //Rounded:lg
           [`&.${prefix}card-curved`]: {
-            [`@apply rounded-${config.rounded.curved}`]: {},
+            [`@apply rounded-${config.rounded.lg}`]: {},
           },
-
+          //Shadow
           [`&:not(.${prefix}card-primary):not(.${prefix}card-info):not(.${prefix}card-success):not(.${prefix}card-warning):not(.${prefix}card-danger)`]:
             {
               [`&.${prefix}card-shadow`]: {
-                [`@apply shadow-${config.cardSadow.color} dark:shadow-${config.cardSadow.colorDark} shadow-${config.cardSadow.size}`]:
+                [`@apply shadow-${config.shadow.light} dark:shadow-${config.shadow.dark} shadow-${config.shadow.size}`]:
                   {},
               },
               [`&.${prefix}card-shadow-hover`]: {
-                [`@apply hover:shadow-${config.cardSadowHover.color} dark:hover:shadow-${config.cardSadowHover.colorDark} hover:shadow-${config.cardSadowHover.size}`]:
+                [`@apply hover:shadow-${config.shadow.light} dark:hover:shadow-${config.shadow.dark} hover:shadow-${config.shadow.size}`]:
                   {},
               },
             },