From 732f1ee18bfde9e26d3ba7e487dac02da63bffbf Mon Sep 17 00:00:00 2001 From: Biya Paul <77636493+bpsmartdesign@users.noreply.github.com> Date: Sun, 23 Jul 2023 23:14:59 +0100 Subject: [PATCH] feat: create card plugin component (#19) Co-authored-by: Sacha Stafyniak --- README.md | 62 +++++++++++++ src/plugins/components/card.ts | 151 ++++++++++++++++++++++++++++++++ src/plugins/components/index.ts | 2 + 3 files changed, 215 insertions(+) create mode 100644 src/plugins/components/card.ts diff --git a/README.md b/README.md index 270ebc0..6bc9248 100644 --- a/README.md +++ b/README.md @@ -61,6 +61,68 @@ export default withShurikenUI({ theme: { extend: { shurikenUi: { + card: { + 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', + } breadcrumb: { list: { font: 'sans', diff --git a/src/plugins/components/card.ts b/src/plugins/components/card.ts new file mode 100644 index 0000000..50e53e1 --- /dev/null +++ b/src/plugins/components/card.ts @@ -0,0 +1,151 @@ +import plugin from 'tailwindcss/plugin' +import { defu } from 'defu' +import { type PluginOption, defaultPluginOptions } from '../options' + +const defaultCardConfig = { + 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 default plugin.withOptions( + function (options: PluginOption) { + const { prefix } = defu(options, defaultPluginOptions) + + return function ({ addComponents, theme }) { + const config = theme('shurikenUi.card') satisfies typeof defaultCardConfig + + addComponents({ + [`.${prefix}-card`]: { + [`@apply relative w-${config.size} transition-all duration-${config.duration}`]: + {}, + + [`&.${prefix}-card-white`]: { + [`@apply border bg-${config.cardWhite.bg} border-${config.cardWhite.border} dark:border-${config.cardWhite.borderDark} dark:bg-${config.cardWhite.bgDark}`]: + {}, + }, + [`&.${prefix}-card-white-contrast`]: { + [`@apply border bg-${config.cardWhiteContrast.bg} border-${config.cardWhiteContrast.border} dark:border-${config.cardWhiteContrast.borderDark} dark:bg-${config.cardWhiteContrast.bgDark}`]: + {}, + }, + [`&.${prefix}-card-muted`]: { + [`@apply border bg-${config.cardMuted.bg} border-${config.cardMuted.border} dark:border-${config.cardMuted.borderDark} dark:bg-${config.cardMuted.bgDark}`]: + {}, + }, + [`&.${prefix}-card-muted-contrast`]: { + [`@apply border bg-${config.cardMutedContrast.bg} border-${config.cardMutedContrast.border} dark:border-${config.cardMutedContrast.borderDark} dark:bg-${config.cardMutedContrast.bgDark}`]: + {}, + }, + [`&.${prefix}-card-primary`]: { + [`@apply border bg-${config.cardPrimary.bg} border-${config.cardPrimary.border}`]: + {}, + }, + [`&.${prefix}-card-info`]: { + [`@apply border bg-${config.cardInfo.bg} border-${config.cardInfo.border}`]: + {}, + }, + [`&.${prefix}-card-success`]: { + [`@apply border bg-${config.cardSuccess.bg} border-${config.cardSuccess.border}`]: + {}, + }, + [`&.${prefix}-card-warning`]: { + [`@apply border bg-${config.cardWarning.bg} border-${config.cardWarning.border}`]: + {}, + }, + [`&.${prefix}-card-danger`]: { + [`@apply border bg-${config.cardDanger.bg} border-${config.cardDanger.border}`]: + {}, + }, + [`&.${prefix}-card-rounded`]: { + [`@apply rounded-${config.rounded.default}`]: {}, + }, + [`&.${prefix}-card-smooth`]: { + [`@apply rounded-${config.rounded.smooth}`]: {}, + }, + [`&.${prefix}-card-curved`]: { + [`@apply rounded-${config.rounded.curved}`]: {}, + }, + + [`&: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}`]: + {}, + }, + [`&.${prefix}-card-shadow-hover`]: { + [`@apply hover:shadow-${config.cardSadowHover.color} dark:hover:shadow-${config.cardSadowHover.colorDark} hover:shadow-${config.cardSadowHover.size}`]: + {}, + }, + }, + }, + }) + } + }, + function () { + return { + theme: { + shurikenUi: { + card: defaultCardConfig, + }, + }, + } + } +) diff --git a/src/plugins/components/index.ts b/src/plugins/components/index.ts index b586e4f..2b30557 100644 --- a/src/plugins/components/index.ts +++ b/src/plugins/components/index.ts @@ -1,6 +1,7 @@ import plugin from 'tailwindcss/plugin' import { defu } from 'defu' import { type PluginOption } from '../options' +import card from './card' import avatarGroup from './avatar-group' import autocomplete from './autocomplete' import avatar from './avatar' @@ -38,6 +39,7 @@ import tag from './tag' import breadcrumb from './breadcrumb' const components = [ + card, breadcrumb, avatarGroup, autocomplete,