470 lines
14 KiB
JavaScript
470 lines
14 KiB
JavaScript
|
|
import plugin from 'tailwindcss/plugin';
|
|
|
|
export default plugin(({addComponents, theme}) => {
|
|
// Base
|
|
addComponents({
|
|
'.btn': {
|
|
'display': 'inline-flex',
|
|
'align-items': 'center',
|
|
'cursor': 'pointer',
|
|
'line-height': '1',
|
|
'border-radius': theme('custom.components.common.borderRadius.btn'),
|
|
'height': theme('custom.components.btn.DEFAULT.height'),
|
|
'padding-inline-start': theme('custom.components.btn.DEFAULT.px'),
|
|
'padding-inline-end': theme('custom.components.btn.DEFAULT.px'),
|
|
'gap': theme('custom.components.btn.DEFAULT.gap'),
|
|
'border': '1px solid transparent',
|
|
'font-weight': theme('custom.components.btn.DEFAULT.fontWeight'),
|
|
'font-size': theme('custom.components.btn.DEFAULT.fontSize'),
|
|
'outline': 'none'
|
|
},
|
|
'.btn-icon': {
|
|
'flex-shrink': '0',
|
|
'padding': '0',
|
|
'gap': '0',
|
|
'width': theme('custom.components.btn.DEFAULT.height'),
|
|
'i': {
|
|
'line-height': '0 !important'
|
|
}
|
|
},
|
|
'.btn-xs': {
|
|
'height': theme('custom.components.btn.xs.height'),
|
|
'padding-inline-start': theme('custom.components.btn.xs.px'),
|
|
'padding-inline-end': theme('custom.components.btn.xs.px'),
|
|
'font-weight': theme('custom.components.btn.xs.fontWeight'),
|
|
'font-size': theme('custom.components.btn.xs.fontSize'),
|
|
'gap': theme('custom.components.btn.xs.gap'),
|
|
'&.btn-icon': {
|
|
'width': theme('custom.components.btn.xs.height')
|
|
}
|
|
},
|
|
'.btn-sm': {
|
|
'height': theme('custom.components.btn.sm.height'),
|
|
'padding-inline-start': theme('custom.components.btn.sm.px'),
|
|
'padding-inline-end': theme('custom.components.btn.sm.px'),
|
|
'font-weight': theme('custom.components.btn.sm.fontWeight'),
|
|
'font-size': theme('custom.components.btn.sm.fontSize'),
|
|
'gap': theme('custom.components.btn.sm.gap'),
|
|
'&.btn-icon': {
|
|
'width': theme('custom.components.btn.sm.height')
|
|
}
|
|
},
|
|
'.btn-lg': {
|
|
'height': theme('custom.components.btn.lg.height'),
|
|
'padding-inline-start': theme('custom.components.btn.lg.px'),
|
|
'padding-inline-end': theme('custom.components.btn.lg.px'),
|
|
'font-weight': theme('custom.components.btn.lg.fontWeight'),
|
|
'font-size': theme('custom.components.btn.lg.fontSize'),
|
|
'gap': theme('custom.components.btn.lg.gap'),
|
|
'&.btn-icon': {
|
|
'width': theme('custom.components.btn.lg.height')
|
|
}
|
|
}
|
|
});
|
|
|
|
// Disabled state
|
|
addComponents({
|
|
'.btn': {
|
|
'&[disabled], &.disabled': {
|
|
'opacity': '0.5',
|
|
'pointer-events': 'none'
|
|
}
|
|
}
|
|
});
|
|
|
|
// Only icon option
|
|
addComponents({
|
|
'.btn-icon': {
|
|
'justify-content': 'center',
|
|
'flex-shrink': '0',
|
|
'padding': '0',
|
|
'gap': '0',
|
|
'width': theme('custom.components.btn.DEFAULT.height')
|
|
},
|
|
'.btn-icon.btn-xs': {
|
|
'width': theme('custom.components.btn.xs.height')
|
|
},
|
|
'.btn-icon.btn-sm': {
|
|
'width': theme('custom.components.btn.sm.height')
|
|
},
|
|
'.btn-icon.btn-lg': {
|
|
'width': theme('custom.components.btn.lg.height')
|
|
}
|
|
});
|
|
|
|
// Icon sizes
|
|
addComponents({
|
|
'.btn': {
|
|
'i': {
|
|
'font-size': theme('custom.components.btn.DEFAULT.iconFontSize'),
|
|
'line-height': '0 !important',
|
|
}
|
|
},
|
|
'.btn-icon': {
|
|
'i': {
|
|
'font-size': theme('custom.components.btn.DEFAULT.onlyIconFontSize'),
|
|
}
|
|
},
|
|
'.btn-xs': {
|
|
'i': {
|
|
'font-size': theme('custom.components.btn.xs.iconFontSize'),
|
|
},
|
|
'&.btn-icon': {
|
|
'i': {
|
|
'font-size': theme('custom.components.btn.xs.onlyIconFontSize'),
|
|
}
|
|
}
|
|
},
|
|
'.btn-sm': {
|
|
'i': {
|
|
'font-size': theme('custom.components.btn.sm.iconFontSize'),
|
|
},
|
|
'&.btn-icon': {
|
|
'i': {
|
|
'font-size': theme('custom.components.btn.sm.onlyIconFontSize'),
|
|
}
|
|
}
|
|
},
|
|
'.btn-lg': {
|
|
'i': {
|
|
'font-size': theme('custom.components.btn.lg.iconFontSize'),
|
|
},
|
|
'&.btn-icon': {
|
|
'i': {
|
|
'font-size': theme('custom.components.btn.lg.onlyIconFontSize'),
|
|
}
|
|
}
|
|
},
|
|
'.btn-icon-xs': {
|
|
'i': {
|
|
'font-size': `${theme('fontSize.xs')}`
|
|
}
|
|
},
|
|
'.btn-icon-sm': {
|
|
'i': {
|
|
'font-size': `${theme('fontSize.sm')}`
|
|
}
|
|
},
|
|
'.btn-icon-md': {
|
|
'i': {
|
|
'font-size': `${theme('fontSize.md')}`
|
|
}
|
|
},
|
|
'.btn-icon-lg': {
|
|
'i': {
|
|
'font-size': `${theme('fontSize.lg')}`
|
|
}
|
|
},
|
|
'.btn-icon-xl': {
|
|
'i': {
|
|
'font-size': `${theme('fontSize.xl')}`
|
|
}
|
|
},
|
|
'.btn-icon-2xl': {
|
|
'i': {
|
|
'font-size': `${theme('fontSize.2xl')}`
|
|
}
|
|
}
|
|
});
|
|
|
|
// Icon extended sizes
|
|
addComponents({
|
|
'.btn': {
|
|
'&.btn-icon-sm': {
|
|
'i': {
|
|
'font-size': `${theme('fontSize.sm')}`
|
|
}
|
|
},
|
|
'&.btn-icon-md': {
|
|
'i': {
|
|
'font-size': `${theme('fontSize.md')}`
|
|
}
|
|
},
|
|
'&.btn-icon-lg': {
|
|
'i': {
|
|
'font-size': `${theme('fontSize.lg')}`
|
|
}
|
|
},
|
|
'&.btn-icon-xl': {
|
|
'i': {
|
|
'font-size': `${theme('fontSize.xl')}`
|
|
}
|
|
},
|
|
'&.btn-icon-2xl': {
|
|
'i': {
|
|
'font-size': `${theme('fontSize.2xl')}`
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Link varaint
|
|
addComponents({
|
|
'.btn-link': {
|
|
'color': 'var(--tw-primary)',
|
|
'font-size': theme('fontSize.2sm'),
|
|
'height': 'auto',
|
|
'padding-bottom': '0.25em',
|
|
'padding-inline-start': '0',
|
|
'padding-inline-end': '0',
|
|
'border-radius': '0',
|
|
'background-color': 'transparent',
|
|
'border-bottom': '1px dashed var(--tw-primary)',
|
|
'&:hover, &:focus, &:active, &.active' : {
|
|
'background-color': 'transparent',
|
|
'border-bottom': '1px dashed var(--tw-primary-active)',
|
|
'color': 'var(--tw-primary-active)',
|
|
},
|
|
'&.btn-sm': {
|
|
'font-size': theme('fontSize.xs'),
|
|
},
|
|
'&.btn-lg': {
|
|
'font-size': theme('fontSize.sm'),
|
|
}
|
|
},
|
|
});
|
|
|
|
// Tabs
|
|
addComponents({
|
|
'.btn-tabs': {
|
|
'display': 'inline-flex',
|
|
'align-items': 'center',
|
|
'line-height': '1',
|
|
'background-color': 'var(--tw-gray-100)',
|
|
'border': '1px solid var(--tw-gray-200)',
|
|
'.btn': {
|
|
'color': 'var(--tw-gray-700)',
|
|
'i': {
|
|
'color': 'var(--tw-gray-400)',
|
|
},
|
|
'&:hover, &:focus, &:active, &.active' : {
|
|
'background-color': 'var(--tw-light)',
|
|
'border': '1px solid var(--tw-gray-200)',
|
|
'color': 'var(--tw-gray-900)',
|
|
'box-shadow': 'var(--tw-light-box-shadow)',
|
|
'i': {
|
|
'color': 'var(--tw-gray-500)',
|
|
}
|
|
},
|
|
}
|
|
}
|
|
});
|
|
|
|
// Tabs sizes
|
|
addComponents({
|
|
'.btn-tabs': {
|
|
'border-radius': theme('custom.components.common.borderRadius.btn'),
|
|
'height': theme('custom.components.btn.DEFAULT.height'),
|
|
'padding': theme('custom.components.btn.DEFAULT.tabsGap'),
|
|
'gap': theme('custom.components.btn.DEFAULT.tabsGap'),
|
|
'.btn': {
|
|
'i': {
|
|
'font-size': theme('custom.components.btn.DEFAULT.iconFontSize'),
|
|
},
|
|
'height': `calc(${theme('custom.components.btn.DEFAULT.height')} - 2 * ${theme('custom.components.btn.DEFAULT.tabsGap')})`,
|
|
'&.btn-icon': {
|
|
'width': `calc(${theme('custom.components.btn.DEFAULT.height')} - 2 * ${theme('custom.components.btn.DEFAULT.tabsGap')})`,
|
|
}
|
|
},
|
|
'&.btn-tabs-sm': {
|
|
'height': theme('custom.components.btn.sm.height'),
|
|
'padding': theme('custom.components.btn.sm.tabsGap'),
|
|
'gap': theme('custom.components.btn.sm.tabsGap'),
|
|
'.btn': {
|
|
'i': {
|
|
'font-size': theme('custom.components.btn.sm.iconFontSize'),
|
|
},
|
|
'height': `calc(${theme('custom.components.btn.sm.height')} - 2 * ${theme('custom.components.btn.sm.tabsGap')})`,
|
|
'&.btn-icon': {
|
|
'width': `calc(${theme('custom.components.btn.sm.height')} - 2 * ${theme('custom.components.btn.sm.tabsGap')})`,
|
|
}
|
|
}
|
|
},
|
|
'&.btn-tabs-lg': {
|
|
'height': theme('custom.components.btn.lg.height'),
|
|
'padding': theme('custom.components.btn.lg.tabsGap'),
|
|
'gap': theme('custom.components.btn.lg.tabsGap'),
|
|
'.btn': {
|
|
'i': {
|
|
'font-size': theme('custom.components.btn.lg.iconFontSize'),
|
|
},
|
|
'height': `calc(${theme('custom.components.btn.lg.height')} - 2 * ${theme('custom.components.btn.lg.tabsGap')})`,
|
|
'&.btn-icon': {
|
|
'width': `calc(${theme('custom.components.btn.lg.height')} - 2 * ${theme('custom.components.btn.lg.tabsGap')})`,
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Input
|
|
addComponents({
|
|
'.btn-input': {
|
|
'cursor': 'auto',
|
|
'color': 'var(--tw-gray-700)',
|
|
'border-color': 'var(--tw-gray-300)',
|
|
'background-color': 'var(--tw-light-active)',
|
|
'i': {
|
|
'color': 'var(--tw-gray-500)',
|
|
}
|
|
}
|
|
});
|
|
|
|
// Color varaints
|
|
const colors = ['primary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'secondary'];
|
|
|
|
colors.forEach((color) => {
|
|
if (color === 'light') {
|
|
addComponents({
|
|
'.btn-light': {
|
|
'color': 'var(--tw-gray-700)',
|
|
'border-color': 'var(--tw-gray-300)',
|
|
'background-color': 'var(--tw-light)',
|
|
'i': {
|
|
'color': 'var(--tw-gray-500)',
|
|
},
|
|
'&:hover, &:focus, &:active, &.active' : {
|
|
'border-color': 'var(--tw-gray-300)',
|
|
'background-color': 'var(--tw-light-active)',
|
|
'box-shadow': 'var(--tw-default-box-shadow)',
|
|
'color': 'var(--tw-gray-800)',
|
|
'i': {
|
|
'color': 'var(--tw-gray-600)',
|
|
},
|
|
},
|
|
'&[disabled], &.disabled': {
|
|
'opacity': '1',
|
|
'color': 'var(--tw-gray-500)',
|
|
'border-color': 'var(--tw-gray-200)',
|
|
'background-color': 'var(--tw-light)',
|
|
'i': {
|
|
'color': 'var(--tw-gray-400)',
|
|
}
|
|
}
|
|
},
|
|
'.btn-light.btn-clear': {
|
|
'border-color': 'transparent',
|
|
'background-color': 'transparent',
|
|
'color': 'var(--tw-gray-700)',
|
|
'i': {
|
|
'color': 'var(--tw-gray-600)',
|
|
},
|
|
'&:hover, &:focus, &:active, &.active' : {
|
|
'background-color': 'var(--tw-gray-200)',
|
|
'border-color': 'transparent',
|
|
'box-shadow': 'none',
|
|
'color': 'var(--tw-gray-800)',
|
|
'i': {
|
|
'color': 'var(--tw-gray-700)',
|
|
}
|
|
},
|
|
'&[disabled], &.disabled': {
|
|
'opacity': '1',
|
|
'color': 'var(--tw-gray-500)',
|
|
'border-color': 'transparent',
|
|
'background-color': 'transparent',
|
|
'i': {
|
|
'color': 'var(--tw-gray-400)',
|
|
}
|
|
}
|
|
}
|
|
});
|
|
} else if (color === 'secondary') {
|
|
addComponents({
|
|
'.btn-secondary': {
|
|
'color': 'var(--tw-gray-700)',
|
|
'border-color': 'var(--tw-gray-200)',
|
|
'background-color': 'var(--tw-secondary)',
|
|
'i': {
|
|
'color': 'var(--tw-gray-500)',
|
|
},
|
|
'&:hover, &:focus, &:active, &.active' : {
|
|
'border-color': 'var(--tw-gray-300)',
|
|
'background-color': 'var(--tw-secondary-active)',
|
|
'box-shadow': 'var(--tw-default-box-shadow)',
|
|
'color': 'var(--tw-gray-800)',
|
|
'i': {
|
|
'color': 'var(--tw-gray-600)',
|
|
}
|
|
},
|
|
'&[disabled], &.disabled': {
|
|
'opacity': '1',
|
|
'color': 'var(--tw-gray-500)',
|
|
'border-color': 'var(--tw-gray-200)',
|
|
'background-color': 'var(--tw-light)',
|
|
'i': {
|
|
'color': 'var(--tw-gray-400)',
|
|
}
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
addComponents({
|
|
[`.btn-${color}`]: {
|
|
'color': theme('colors.white'),
|
|
'background-color': `var(--tw-${color})`,
|
|
'&:hover, &:focus, &:active, &.active' : {
|
|
'background-color': `var(--tw-${color}-active)`,
|
|
'box-shadow': `var(--tw-${color}-box-shadow)`,
|
|
}
|
|
},
|
|
[`.btn-outline.btn-${color}`]: {
|
|
'color': `var(--tw-${color})`,
|
|
'background-color': `var(--tw-${color}-light)`,
|
|
'border-color': `var(--tw-${color}-clarity)`,
|
|
'i': {
|
|
'color': `var(--tw-${color})`,
|
|
},
|
|
'&:hover, &:focus, &:active, &.active' : {
|
|
'color': `var(--tw-${color}-inverse)`,
|
|
'background-color': `var(--tw-${color})`,
|
|
'border-color': `var(--tw-${color})`,
|
|
'box-shadow': `none`,
|
|
'i': {
|
|
'color': `var(--tw-${color}-inverse)`
|
|
},
|
|
}
|
|
},
|
|
[`.btn-clear.btn-${color}`]: {
|
|
'border-color': 'transparent',
|
|
'background-color': 'transparent',
|
|
'color': `var(--tw-${color})`,
|
|
'&:hover, &:focus, &:active, &.active' : {
|
|
'color': `var(--tw-${color}-inverse)`,
|
|
'background-color': `var(--tw-${color})`,
|
|
'border-color': `var(--tw-${color})`,
|
|
'box-shadow': 'none',
|
|
'i': {
|
|
'color': `var(--tw-${color}-inverse)`
|
|
}
|
|
}
|
|
},
|
|
[`.btn-subtle.btn-${color}`]: {
|
|
'border-color': 'transparent',
|
|
'background-color': 'transparent',
|
|
'color': `var(--tw-${color})`,
|
|
'i': {
|
|
'color': `var(--tw-${color})`
|
|
},
|
|
'&:hover, &:focus, &:active, &.active' : {
|
|
'color': `var(--tw-${color})`,
|
|
'background-color': `var(--tw-${color}-light)`,
|
|
'border-color': `var(--tw-${color}-light)`,
|
|
'box-shadow': `none`,
|
|
'i': {
|
|
'color': `var(--tw-${color})`
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Utilities
|
|
addComponents({
|
|
'.btn-rounded': {
|
|
'border-radius': theme('custom.components.common.borderRadius.btn')
|
|
}
|
|
});
|
|
}); |