Skip to content

Commit

Permalink
feat: create button-close plugin component (#9)
Browse files Browse the repository at this point in the history 
Co-authored-by: Sacha Stafyniak <sacha@digisquad.io>
  • Loading branch information
@bpsmartdesign @stafyniaksacha
bpsmartdesign and stafyniaksacha authored Jul 23, 2023
1 parent 94b59dd commit cbc9ef8
Show file tree
Hide file tree
Showing 4 changed files with 394 additions and 0 deletions.
112 changes: 112 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,118 @@ export default withShurikenUI({
theme: {
extend: {
shurikenUi: {
buttonClose: {
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',
},
},
buttonIcon: {
text: 'sm',
font: 'normal',
duration: '300',
buttonSmall: {
size: '8',
space: '1',
},
buttonMedium: {
size: '10',
space: '2',
},
buttonLarge: {
size: '12',
space: '3',
},
rounded: {
smooth: 'md',
curved: 'lg',
full: 'full',
},
default: {
bgHover: 'muted-50',
bgHoverDark: 'muted-600',
text: 'muted-700',
textDark: 'white',
},
muted: {
bg: 'muted-200',
bgDark: 'muted-700',
bgHover: 'muted-100',
bgHoverDark: 'muted-600',
text: 'muted-500',
textDark: 'white',
},
primary: {
border: 'primary-500',
bgHover: 'primary-500/20',
text: 'primary-500',
},
info: {
border: 'info-500',
bgHover: 'info-500/20',
text: 'info-500',
},
success: {
border: 'success-500',
bgHover: 'success-500/20',
text: 'success-500',
},
warning: {
border: 'warning-500',
bgHover: 'warning-500/20',
text: 'warning-500',
},
danger: {
border: 'danger-500',
bgHover: 'danger-500/20',
text: 'danger-500',
},
},
dropdownDivider: {
space: '2',
border: 'muted-200', // you can use arbitrary value like '[#fff]'
Expand Down
128 changes: 128 additions & 0 deletions src/plugins/components/button-close.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import plugin from 'tailwindcss/plugin'
import { defu } from 'defu'
import { type PluginOption, defaultPluginOptions } from '../options'

const defaultButtonCloseConfig = {
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 default plugin.withOptions(
function (options: PluginOption) {
const { prefix } = defu(options, defaultPluginOptions)

return function ({ addComponents, theme }) {
const config = theme(
'shurikenUi.buttonClose'
) satisfies typeof defaultButtonCloseConfig

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

[`.${prefix}-button-icon`]: {
[`@apply h-${config.buttonIcon.size} w-${config.buttonIcon.size} fill-current`]:
{},
},
[`&.${prefix}-button-rounded`]: {
[`@apply rounded`]: {},
},
[`&.${prefix}-button-smooth`]: {
[`@apply rounded-${config.rounded.smooth}`]: {},
},
[`&.${prefix}-button-curved`]: {
[`@apply rounded-${config.rounded.curved}`]: {},
},
[`&.${prefix}-button-full`]: {
[`@apply rounded-${config.rounded.full}`]: {},
},
[`&.${prefix}-button-default`]: {
[`@apply hover:bg-${config.default.bgHover} dark:hover:bg-${config.default.bgHoverDark} text-${config.default.text} dark:text-${config.default.textDark}`]:
{},
},
[`&.${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}`]:
{},
},
[`&.${prefix}-button-primary`]: {
[`@apply bg-${config.primary.bg} hover:bg-${config.primary.bgHover} text-${config.primary.text}`]:
{},
},
[`&.${prefix}-button-info`]: {
[`@apply bg-${config.info.bg} hover:bg-${config.info.bgHover} text-${config.info.text}`]:
{},
},
[`&.${prefix}-button-success`]: {
[`@apply bg-${config.success.bg} hover:bg-${config.success.bgHover} text-${config.success.text}`]:
{},
},
[`&.${prefix}-button-warning`]: {
[`@apply bg-${config.warning.bg} hover:bg-${config.warning.bgHover} text-${config.warning.text}`]:
{},
},
[`&.${prefix}-button-danger`]: {
[`@apply bg-${config.danger.bg} hover:bg-${config.danger.bgHover} text-${config.danger.text}`]:
{},
},
},
})
}
},
function () {
return {
theme: {
shurikenUi: {
buttonClose: defaultButtonCloseConfig,
},
},
}
}
)
150 changes: 150 additions & 0 deletions src/plugins/components/button-icon.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
import plugin from 'tailwindcss/plugin'
import { defu } from 'defu'
import { type PluginOption, defaultPluginOptions } from '../options'

const defaultButtonIconConfig = {
text: 'sm',
font: 'normal',
duration: '300',
buttonSmall: {
size: '8',
space: '1',
},
buttonMedium: {
size: '10',
space: '2',
},
buttonLarge: {
size: '12',
space: '3',
},
rounded: {
smooth: 'md',
curved: 'lg',
full: 'full',
},
default: {
bgHover: 'muted-50',
bgHoverDark: 'muted-600',
text: 'muted-700',
textDark: 'white',
},
muted: {
bg: 'muted-200',
bgDark: 'muted-700',
bgHover: 'muted-100',
bgHoverDark: 'muted-600',
text: 'muted-500',
textDark: 'white',
},
primary: {
border: 'primary-500',
bgHover: 'primary-500/20',
text: 'primary-500',
},
info: {
border: 'info-500',
bgHover: 'info-500/20',
text: 'info-500',
},
success: {
border: 'success-500',
bgHover: 'success-500/20',
text: 'success-500',
},
warning: {
border: 'warning-500',
bgHover: 'warning-500/20',
text: 'warning-500',
},
danger: {
border: 'danger-500',
bgHover: 'danger-500/20',
text: 'danger-500',
},
}

export default plugin.withOptions(
function (options: PluginOption) {
const { prefix } = defu(options, defaultPluginOptions)

return function ({ addComponents, theme }) {
const config = theme(
'shurikenUi.buttonClose'
) satisfies typeof defaultButtonIconConfig

addComponents({
[`.${prefix}-button-close`]: {
[`@apply ${prefix}-focus relative inline-flex items-center justify-center space-x-1 font-sans text-${config.text} font-${config.font} leading-5 no-underline outline-none transition-all duration-${config.duration} disabled:opacity-60 disabled:cursor-not-allowed hover:shadow-none`]:
{},

[`&.${prefix}-button-small`]: {
[`@apply h-${config.buttonSmall.size} w-${config.buttonSmall.size} p-${config.buttonSmall.space}`]:
{},
},
[`&.${prefix}-button-medium`]: {
[`@apply h-${config.buttonMedium.size} w-${config.buttonMedium.size} p-${config.buttonMedium.space}`]:
{},
},
[`&.${prefix}-button-large`]: {
[`@apply h-${config.buttonLarge.size} w-${config.buttonLarge.size} p-${config.buttonLarge.space}`]:
{},
},
[`&.${prefix}-button-rounded`]: {
[`@apply rounded`]: {},
},
[`&.${prefix}-button-smooth`]: {
[`@apply rounded-${config.rounded.smooth}`]: {},
},
[`&.${prefix}-button-curved`]: {
[`@apply rounded-${config.rounded.curved}`]: {},
},
[`&.${prefix}-button-full`]: {
[`@apply rounded-${config.rounded.full}`]: {},
},
[`&.${prefix}-button-loading`]: {
[`@apply !text-transparent`]: {},
},

[`&.${prefix}-button-default`]: {
[`@apply text-${config.default.text} dark:text-${config.default.textDark} dark:hover:bg-${config.default.bgHoverDark} hover:bg-${config.default.bgHover}`]:
{},
},
[`&.${prefix}-button-muted`]: {
[`@apply text-${config.muted.text} bg-${config.muted.bg} dark:text-${config.muted.textDark} dark:bg-${config.muted.bgDark} dark:hover:bg-${config.muted.bgHoverDark} hover:bg-${config.muted.bgHover}`]:
{},
},
[`&.${prefix}-button-primary`]: {
[`@apply text-${config.primary.text} border-2 border-${config.primary.border} hover:bg-${config.primary.bgHover}`]:
{},
},
[`&.${prefix}-button-info`]: {
[`@apply text-${config.info.text} border-2 border-${config.info.border} hover:bg-${config.info.bgHover}`]:
{},
},
[`&.${prefix}-button-success`]: {
[`@apply text-${config.success.text} border-2 border-${config.success.border} hover:bg-${config.success.bgHover}`]:
{},
},
[`&.${prefix}-button-warning`]: {
[`@apply text-${config.warning.text} border-2 border-${config.warning.border} hover:bg-${config.warning.bgHover}`]:
{},
},
[`&.${prefix}-button-danger`]: {
[`@apply text-${config.danger.text} border-2 border-${config.danger.border} hover:bg-${config.danger.bgHover}`]:
{},
},
},
})
}
},
function () {
return {
theme: {
shurikenUi: {
buttonClose: defaultButtonIconConfig,
},
},
}
}
)
Loading

0 comments on commit cbc9ef8

Please sign in to comment.