Skip to content

Commit

Permalink
feat(ButtonClose): implement new config
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Dec 6, 2023
1 parent 5910409 commit c18252f
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 66 deletions.
104 changes: 52 additions & 52 deletions src/plugins/components/button-close/button-close.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export const key = 'buttonClose' as const

export const config = {
export const defaultConfig = {
size: '9',
rounded: {
none: 'rounded-none',
Expand Down Expand Up @@ -146,57 +146,57 @@ export const config = {
},
}

export const defaultConfig = {
size: '9',
duration: '300',
buttonIcon: {
size: '4',
},
rounded: {
smooth: 'md',
curved: 'lg',
full: 'full',
},
default: {
bgHover: 'muted-100',
bgHoverDark: 'muted-700',
text: 'muted-700',
textDark: 'muted-50',
},
muted: {
bg: 'muted-100',
bgHover: 'muted-50',
bgDark: 'muted-700',
bgHoverDark: 'muted-600',
text: 'muted-700',
textDark: 'muted-50',
},
primary: {
bg: 'primary-500/10',
bgHover: 'primary-500/20',
text: 'primary-500',
},
info: {
bg: 'info-500/10',
bgHover: 'info-500/20',
text: 'info-500',
},
success: {
bg: 'success-500/10',
bgHover: 'success-500/20',
text: 'success-500',
},
warning: {
bg: 'warning-500/10',
bgHover: 'warning-500/20',
text: 'warning-500',
},
danger: {
bg: 'danger-500/10',
bgHover: 'danger-500/20',
text: 'danger-500',
},
}
// export const defaultConfig = {
// size: '9',
// duration: '300',
// buttonIcon: {
// size: '4',
// },
// rounded: {
// smooth: 'md',
// curved: 'lg',
// full: 'full',
// },
// default: {
// bgHover: 'muted-100',
// bgHoverDark: 'muted-700',
// text: 'muted-700',
// textDark: 'muted-50',
// },
// muted: {
// bg: 'muted-100',
// bgHover: 'muted-50',
// bgDark: 'muted-700',
// bgHoverDark: 'muted-600',
// text: 'muted-700',
// textDark: 'muted-50',
// },
// primary: {
// bg: 'primary-500/10',
// bgHover: 'primary-500/20',
// text: 'primary-500',
// },
// info: {
// bg: 'info-500/10',
// bgHover: 'info-500/20',
// text: 'info-500',
// },
// success: {
// bg: 'success-500/10',
// bgHover: 'success-500/20',
// text: 'success-500',
// },
// warning: {
// bg: 'warning-500/10',
// bgHover: 'warning-500/20',
// text: 'warning-500',
// },
// danger: {
// bg: 'danger-500/10',
// bgHover: 'danger-500/20',
// text: 'danger-500',
// },
// }

export type ButtonCloseConfig = typeof defaultConfig
export interface ButtonClosePluginConfig {
Expand Down
86 changes: 72 additions & 14 deletions src/plugins/components/button-close/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,51 +20,109 @@ export default plugin.withOptions(

addComponents({
[`.${prefix}button-close`]: {
[`@apply ${prefix}focus flex h-${config.size} w-${config.size} items-center justify-center transition-colors duration-${config.duration} disabled:opacity-30 cursor-pointer`]:
[`@apply ${prefix}focus flex items-center justify-center disabled:opacity-30 cursor-pointer`]:
{},

//Size
[`@apply h-${config.size} w-${config.size}`]: {},
//Transition
[`@apply transition-${config.transition.property} duration-${config.transition.duration}`]:
{},
//Icon
[`.${prefix}button-icon`]: {
[`@apply h-${config.buttonIcon.size} w-${config.buttonIcon.size} fill-current`]:
[`@apply h-${config.icon.size} w-${config.icon.size} fill-current`]:
{},
},
//Rounded:sm
[`&.${prefix}button-rounded`]: {
[`@apply rounded`]: {},
[`@apply ${config.rounded.sm}`]: {},
},
//Rounded:md
[`&.${prefix}button-smooth`]: {
[`@apply rounded-${config.rounded.smooth}`]: {},
[`@apply ${config.rounded.md}`]: {},
},
//Rounded:lg
[`&.${prefix}button-curved`]: {
[`@apply rounded-${config.rounded.curved}`]: {},
[`@apply ${config.rounded.lg}`]: {},
},
//Rounded:full
[`&.${prefix}button-full`]: {
[`@apply rounded-${config.rounded.full}`]: {},
[`@apply ${config.rounded.full}`]: {},
},
//Color:default
[`&.${prefix}button-default`]: {
[`@apply hover:bg-${config.default.bgHover} dark:hover:bg-${config.default.bgHoverDark} text-${config.default.text} dark:text-${config.default.textDark}`]:
[`@apply text-${config.color.default.font.color.light} dark:text-${config.color.default.font.color.dark}`]:
{},
//Background
[`@apply bg-${config.color.default.background.base.light} dark:bg-${config.color.default.background.base.dark}`]:
{},
//Background hover
[`@apply hover:bg-${config.color.default.background.hover.light} dark:hover:bg-${config.color.default.background.hover.dark}`]:
{},
},
//Color:muted
[`&.${prefix}button-muted`]: {
[`@apply bg-${config.muted.bg} hover:bg-${config.muted.bgHover} dark:bg-${config.muted.bgDark} dark:hover:bg-${config.muted.bgHoverDark} text-${config.muted.text} dark:text-${config.muted.textDark}`]:
[`@apply text-${config.color.muted.font.color.light} dark:text-${config.color.muted.font.color.dark}`]:
{},
//Background
[`@apply bg-${config.color.muted.background.base.light} dark:bg-${config.color.muted.background.base.dark}`]:
{},
//Background hover
[`@apply hover:bg-${config.color.muted.background.hover.light} dark:hover:bg-${config.color.muted.background.hover.dark}`]:
{},
},
//Color:primary
[`&.${prefix}button-primary`]: {
[`@apply bg-${config.primary.bg} hover:bg-${config.primary.bgHover} text-${config.primary.text}`]:
[`@apply text-${config.color.primary.font.color.light} dark:text-${config.color.primary.font.color.dark}`]:
{},
//Background
[`@apply bg-${config.color.primary.background.base.light} dark:bg-${config.color.primary.background.base.dark}`]:
{},
//Background hover
[`@apply hover:bg-${config.color.primary.background.hover.light} dark:hover:bg-${config.color.primary.background.hover.dark}`]:
{},
},
//Color:info
[`&.${prefix}button-info`]: {
[`@apply bg-${config.info.bg} hover:bg-${config.info.bgHover} text-${config.info.text}`]:
[`@apply text-${config.color.info.font.color.light} dark:text-${config.color.info.font.color.dark}`]:
{},
//Background
[`@apply bg-${config.color.info.background.base.light} dark:bg-${config.color.info.background.base.dark}`]:
{},
//Background hover
[`@apply hover:bg-${config.color.info.background.hover.light} dark:hover:bg-${config.color.info.background.hover.dark}`]:
{},
},
//Color:success
[`&.${prefix}button-success`]: {
[`@apply bg-${config.success.bg} hover:bg-${config.success.bgHover} text-${config.success.text}`]:
[`@apply text-${config.color.success.font.color.light} dark:text-${config.color.success.font.color.dark}`]:
{},
//Background
[`@apply bg-${config.color.success.background.base.light} dark:bg-${config.color.success.background.base.dark}`]:
{},
//Background hover
[`@apply hover:bg-${config.color.success.background.hover.light} dark:hover:bg-${config.color.success.background.hover.dark}`]:
{},
},
//Color:warning
[`&.${prefix}button-warning`]: {
[`@apply bg-${config.warning.bg} hover:bg-${config.warning.bgHover} text-${config.warning.text}`]:
[`@apply text-${config.color.warning.font.color.light} dark:text-${config.color.warning.font.color.dark}`]:
{},
//Background
[`@apply bg-${config.color.warning.background.base.light} dark:bg-${config.color.warning.background.base.dark}`]:
{},
//Background hover
[`@apply hover:bg-${config.color.warning.background.hover.light} dark:hover:bg-${config.color.warning.background.hover.dark}`]:
{},
},
//Color:danger
[`&.${prefix}button-danger`]: {
[`@apply bg-${config.danger.bg} hover:bg-${config.danger.bgHover} text-${config.danger.text}`]:
[`@apply text-${config.color.danger.font.color.light} dark:text-${config.color.danger.font.color.dark}`]:
{},
//Background
[`@apply bg-${config.color.danger.background.base.light} dark:bg-${config.color.danger.background.base.dark}`]:
{},
//Background hover
[`@apply hover:bg-${config.color.danger.background.hover.light} dark:hover:bg-${config.color.danger.background.hover.dark}`]:
{},
},
},
Expand Down

0 comments on commit c18252f

Please sign in to comment.