TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

revamp template

Browse Source
This commit is contained in:
fro1991
2025-02-01 16:44:51 +07:00
parent c432df568a
commit 276a289580
1212 changed files with 112762 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/plugins/components/accordion.js Normal file
View File

@ -0,0 +1,26 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({addComponents}) => {
addComponents({
'.accordion-item': {
'display': 'flex',
'flex-direction': 'column',
},
'.accordion-toggle': {
'display': 'flex',
'flex-grow': '1',
'align-items': 'center',
'text-align': 'start',
'justify-content': 'space-between',
},
'.accordion-content': {
'transition': 'height 300ms ease',
'overflow': 'hidden',
'.accordion.active &': {
'display': 'block',
'transition': 'height 300ms ease'
}
}
});
});

114
src/plugins/components/apexcharts.js Normal file
View File

@ -0,0 +1,114 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({addComponents, theme}) => {
// Base
addComponents({
'.apexcharts-text, .apexcharts-title-text, .apexcharts-legend-text': {
'font-family': 'inherit !important',
},
'.apexcharts-title-text': {
'font-weight': theme('fontWeight.normal'),
},
'.apexcharts-pie-label': {
'font-size': theme('fontSize.xs'),
'line-height': theme('fontSize.xs.1.lineHeight'),
},
'.apexcharts-toolbar': {
'text-align': 'start !important',
},
'.apexcharts-menu': {
'border': '1px solid var(--tw-gray-200) !important',
'box-shadow': 'var(--tw-default-box-shadow) !important',
'background-color': 'var(--tw-light) !important',
'border-radius': '0.625rem !important',
'padding': '0.5rem 0 !important',
'overflow': 'hidden',
'min-width': '10rem !important',
'.apexcharts-menu-item': {
'padding': '0.5rem 0.5rem !important',
'&:hover': {
'background-color': 'var(--tw-gray-100) !important'
}
},
},
'.apexcharts-tooltip': {
'border': '1px solid var(--tw-gray-200) !important',
'box-shadow': 'var(--tw-default-box-shadow) !important',
'background-color': 'var(--tw-light) !important',
'border-radius': '0.625rem !important',
'color': 'var(--tw-gray-700) !important',
'.apexcharts-tooltip-title': {
'padding': '0.25rem 0.5rem !important',
'background-color': 'transparent !important',
'font-size': theme('fontSize.2sm'),
'line-height': theme('fontSize.2sm.1.lineHeight'),
'font-weight': theme('fontWeight.medium'),
'color': 'var(--tw-gray-800)',
'border-bottom': '1px solid var(--tw-gray-200) !important',
},
},
'.apexcharts-xaxistooltip': {
'border': '1px solid var(--tw-gray-200) !important',
'box-shadow': 'var(--tw-default-box-shadow)',
'background-color': 'var(--tw-light) !important',
'border-radius': '0.625rem',
'color': 'var(--tw-gray-900)',
'&:before': {
'border-bottom': '0 !important',
},
},
'.apexcharts-legend': {
'display': 'flex',
'flex-direction': 'column',
'gap': theme('spacing.2'),
'.apexcharts-legend-series': {
'gap': theme('spacing.1'),
'display': 'flex',
'align-items': 'center',
'.apexcharts-legend-text': {
'font-size': `${theme('fontSize.sm')}`,
'line-height': theme('fontSize.sm.1.lineHeight'),
'font-weight': `${theme('fontWeight.medium')}`,
'color': 'var(--tw-gray-500)',
},
},
},
'.apexcharts-card-rounded': {
'.apexcharts-canvas': {
'svg': {
'border-bottom-left-radius': theme('custom.components.common.borderRadius.card'),
'border-bottom-right-radius': theme('custom.components.common.borderRadius.card')
}
}
},
'.apexcharts-rounded-sm': {
'.apexcharts-canvas': {
'svg': {
'border-radius': theme('borderRadius.sm'),
}
}
},
'.apexcharts-rounded': {
'.apexcharts-canvas': {
'svg': {
'border-radius': theme('borderRadius.DEFAULT'),
}
}
},
'.apexcharts-rounded-lg': {
'.apexcharts-canvas': {
'svg': {
'border-radius': theme('borderRadius.lg'),
}
}
},
'.apexcharts-rounded-xl': {
'.apexcharts-canvas': {
'svg': {
'border-radius': theme('borderRadius.xl'),
}
}
}
});
});

87
src/plugins/components/badge.js Normal file
View File

@ -0,0 +1,87 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({ addComponents, theme }) => {
// Base
addComponents({
'.badge': {
'display': 'inline-flex',
'align-items': 'center',
'justify-content': 'center',
'line-height': '1',
'border-radius': theme('custom.components.common.borderRadius.badge'),
'padding': '0.5rem 0.5rem',
'border': '1px solid transparent',
'font-weight': theme('fontWeight.medium'),
'font-size': '0.6875rem',
'&.badge-pill': {
'border-radius': '1.875rem',
'padding-inline-start': '0.625rem', // Logical property for RTL/LTR
'padding-inline-end': '0.625rem' // Logical property for RTL/LTR
}
},
'.badge-dot': {
'padding': '0',
'border-radius': '50%'
},
'.badge-circle': {
'padding': '0',
'border-radius': '50%',
'flex-shrink': '0',
'line-height': '0'
},
'.badge-xs': {
'font-size': '0.625rem',
'padding': '0.1875rem 0.3125rem',
'&.badge-pill': {
'padding-inline-start': '0.25rem', // Logical property for RTL/LTR
'padding-inline-end': '0.25rem' // Logical property for RTL/LTR
}
},
'.badge-sm': {
'padding': '0.3125rem 0.375rem',
'&.badge-pill': {
'padding-inline-start': '0.375rem', // Logical property for RTL/LTR
'padding-inline-end': '0.375rem' // Logical property for RTL/LTR
}
},
'.badge-lg': {
'padding': '0.5625rem 0.6875rem',
'font-size': '0.8125rem',
'&.badge-pill': {
'padding-inline-start': '0.6875rem', // Logical property for RTL/LTR
'padding-inline-end': '0.6875rem' // Logical property for RTL/LTR
}
}
});
// Default option
addComponents({
'.badge': {
'color': 'var(--tw-gray-700)',
'border-color': 'transparent',
'background-color': 'var(--tw-gray-200)',
},
'.badge-outline': {
'color': 'var(--tw-gray-600)',
'border-color': 'var(--tw-gray-300)',
'background-color': 'var(--tw-gray-100)',
}
});
// Color options
const colors = ['primary', 'success', 'danger', 'warning', 'info', 'dark'];
colors.forEach((color) => {
addComponents({
[`.badge-${color}`]: {
'color': theme('colors.white'),
'background-color': `var(--tw-${color})`
},
[`.badge-outline.badge-${color}`]: {
'color': `var(--tw-${color})`,
'background-color': `var(--tw-${color}-light)`,
'border-color': `var(--tw-${color}-clarity)`
}
});
});
});

10
src/plugins/components/breakpoints.js Normal file
View File

@ -0,0 +1,10 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({addVariant, config}) => {
const screens = config().theme.screens;
for (const screen of Object.keys(screens)) {
addVariant(`below-${screen}`, `@media screen and (max-width: theme('screens.${screen}'))`);
}
});

20
src/plugins/components/btn-group.js Normal file
View File

@ -0,0 +1,20 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({addComponents}) => {
addComponents({
'.btn-group': {
'display': 'flex',
'align-items': 'stretch',
'.btn + .btn': {
'border-top-inline-start-radius': '0',
'border-bottom-inline-start-radius': '0',
'border-inline-start': '0'
},
'.btn:has(+ .btn)': {
'border-top-inline-end-radius': '0',
'border-bottom-inline-end-radius': '0'
}
}
});
});

470
src/plugins/components/btn.js Normal file
View File

@ -0,0 +1,470 @@
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')
}
});
});

156
src/plugins/components/card.js Normal file
View File

@ -0,0 +1,156 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({ addComponents, theme }) => {
// Base
addComponents({
'.card': {
display: 'flex',
'flex-direction': 'column',
'box-shadow': 'var(--tw-card-box-shadow)',
'background-color': 'var(--tw-card-background-color)',
'border-radius': theme('custom.components.common.borderRadius.card'),
border: 'var(--tw-card-border)',
},
'.card-title': {
'font-size': theme('fontSize.base'),
'line-height': theme('fontSize.base.1.lineHeight'),
'font-weight': theme('fontWeight.semibold'),
color: 'var(--tw-gray-900)',
},
'.card-header': {
display: 'flex',
'min-height': '56px',
'align-items': 'center',
'justify-content': 'space-between',
'border-bottom': 'var(--tw-card-border)',
'padding-inline-start': theme('custom.components.card.px'),
'padding-inline-end': theme('custom.components.card.px'),
'padding-top': theme('custom.components.card.py.header'),
'padding-bottom': theme('custom.components.card.py.header'),
},
'.card-body': {
'flex-grow': '1',
'padding-inline-start': theme('custom.components.card.px'),
'padding-inline-end': theme('custom.components.card.px'),
'padding-top': theme('custom.components.card.py.body'),
'padding-bottom': theme('custom.components.card.py.body'),
},
'.card-footer': {
display: 'flex',
'align-items': 'center',
'justify-content': 'space-between',
'border-top': 'var(--tw-card-border)',
'padding-inline-start': theme('custom.components.card.px'),
'padding-inline-end': theme('custom.components.card.px'),
'padding-top': theme('custom.components.card.py.footer'),
'padding-bottom': theme('custom.components.card.py.footer'),
},
'.card-table': {
table: {
'th:first-child, td:first-child': {
'padding-inline-start': theme('custom.components.card.px'),
},
'th:last-child, td:last-child': {
'padding-inline-end': theme('custom.components.card.px'),
},
'&.table-border': {
border: '0',
},
},
},
'.card-group': {
'padding-inline-start': theme('custom.components.card.px'),
'padding-inline-end': theme('custom.components.card.px'),
'padding-top': theme('custom.components.card.py.group'),
'padding-bottom': theme('custom.components.card.py.group'),
'border-bottom': 'var(--tw-card-border)',
'&:last-child': {
'border-bottom': '0',
},
'& + .card-footer': {
'border-top': '0',
},
},
});
// Border radius (Updated to logical properties)
addComponents({
'.table': {
'th:first-child': {
'border-start-start-radius': theme('custom.components.common.borderRadius.card'), // Logical property for top-left in LTR and top-right in RTL
},
'th:last-child': {
'border-start-end-radius': theme('custom.components.common.borderRadius.card'), // Logical property for top-right in LTR and top-left in RTL
},
},
'.card-header + .card-body, .card-header + .card-table': {
table: {
'th:first-child, th:last-child': {
'border-radius': '0',
},
},
},
});
// Grid
addComponents({
'.card-grid': {
'.card-header, .card-footer': {
'padding-inline-start': theme('custom.components.card.grid.px'),
'padding-inline-end': theme('custom.components.card.grid.px'),
},
'.card-body': {
padding: '0',
'.table': {
border: '0',
'th:first-child, td:first-child': {
'padding-inline-start': theme('custom.components.card.grid.px'),
'&.table-cell-center': {
'padding-inline-end': theme('custom.components.card.grid.px'),
},
},
'th:last-child, td:last-child': {
'padding-inline-end': theme('custom.components.card.grid.px'),
'&.table-cell-center': {
'padding-inline-start': theme('custom.components.card.grid.px'),
},
},
},
},
},
});
// Utilities (Updated border-radius with logical properties)
addComponents({
'.card-border': {
border: 'var(--tw-card-border)',
},
'.card-rounded': {
'border-radius': theme('custom.components.common.borderRadius.card'),
'&.table': {
'border-collapse': 'separate',
'border-spacing': '0',
},
},
'.card-rounded-b': {
'border-end-start-radius': theme('custom.components.common.borderRadius.card'), // Logical property for bottom-left in LTR and bottom-right in RTL
'border-end-end-radius': theme('custom.components.common.borderRadius.card'), // Logical property for bottom-right in LTR and bottom-left in RTL
},
'.card-rounded-bs': {
'border-end-start-radius': theme('custom.components.common.borderRadius.card'),
},
'.card-rounded-be': {
'border-end-end-radius': theme('custom.components.common.borderRadius.card'),
},
'.card-rounded-t': {
'border-start-start-radius': theme('custom.components.common.borderRadius.card'),
'border-start-end-radius': theme('custom.components.common.borderRadius.card'),
},
'.card-rounded-ts': {
'border-start-start-radius': theme('custom.components.common.borderRadius.card'),
},
'.card-rounded-te': {
'border-start-end-radius': theme('custom.components.common.borderRadius.card'),
},
});
});

110
src/plugins/components/checkbox.js Normal file
View File

@ -0,0 +1,110 @@
import plugin from 'tailwindcss/plugin';
import svgToDataUri from 'mini-svg-data-uri';
export default plugin(({addComponents, theme}) => {
// Checkbox
addComponents({
'.checkbox[type="checkbox"]': {
'flex-shrink': '0',
'appearance': 'none',
'box-shadow': 'none',
'background-color': 'var(--tw-light-light)',
'.dark &': {
'background-color': 'var(--tw-coal-500)',
},
'border-radius': theme('custom.components.checkbox.DEFAULT.borderRadius'),
'height': theme('custom.components.checkbox.DEFAULT.size'),
'width': theme('custom.components.checkbox.DEFAULT.size'),
'border': '1px solid var(--tw-gray-300)',
'background-repeat': 'no-repeat',
'background-position': 'center',
'background-size': 'auto',
'&:checked, &[aria-checked="true"]': {
'background-color': 'var(--tw-primary)',
'border': '1px solid var(--tw-primary)',
'background-image': `url("${svgToDataUri('<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9" fill="none"><path d="M10.3667 0.541643L4.80007 6.10831L1.56674 2.87498C1.41061 2.71977 1.1994 2.63265 0.979241 2.63265C0.759086 2.63265 0.547876 2.71977 0.391741 2.87498C0.236532 3.03111 0.149414 3.24232 0.149414 3.46248C0.149414 3.68263 0.236532 3.89384 0.391741 4.04998L4.21674 7.87498C4.37288 8.03019 4.58409 8.1173 4.80424 8.1173C5.0244 8.1173 5.23561 8.03019 5.39174 7.87498L11.5417 1.72498C11.6198 1.64751 11.6818 1.55534 11.7241 1.45379C11.7665 1.35224 11.7882 1.24332 11.7882 1.13331C11.7882 1.0233 11.7665 0.914379 11.7241 0.81283C11.6818 0.711281 11.6198 0.619113 11.5417 0.541643C11.3856 0.386434 11.1744 0.299316 10.9542 0.299316C10.7341 0.299316 10.5229 0.386434 10.3667 0.541643Z" fill="white"/></svg>')}")`
},
'&:indeterminate': {
'background-color': 'var(--tw-primary)',
'border': '1px solid var(--tw-primary)',
'background-image': `url("${svgToDataUri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 10h8"/></svg>')}")`
},
'&:focus-visible': {
'outline': 'none',
'box-shadow': 'none',
},
'&:focus': {
'border-color': 'var(--tw-primary)',
'box-shadow': 'var(--tw-input-focus-box-shadow)',
'color': 'var(--tw-gray-700)',
'&::placeholder': {
'color': 'var(--tw-gray-600)',
},
},
'&:active': {
'color': 'var(--tw-gray-700)',
'&::placeholder': {
'color': 'var(--tw-gray-600)',
},
'box-shadow': 'none',
},
'&:disabled': {
'cursor': 'not-allowed',
'background-color': 'var(--tw-gray-200)',
'border': '1px solid var(--tw-gray-300)',
'&:indeterminate': {
'background-color': 'var(--tw-primary-clarity)',
'border': '0',
'background-image': `url("${svgToDataUri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 10h8"/></svg>')}")`
},
'&:checked, &[aria-checked="true"]': {
'background-color': 'var(--tw-primary-clarity)',
'border': '0',
'background-image': `url("${svgToDataUri('<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9" fill="none"><path d="M10.3667 0.541643L4.80007 6.10831L1.56674 2.87498C1.41061 2.71977 1.1994 2.63265 0.979241 2.63265C0.759086 2.63265 0.547876 2.71977 0.391741 2.87498C0.236532 3.03111 0.149414 3.24232 0.149414 3.46248C0.149414 3.68263 0.236532 3.89384 0.391741 4.04998L4.21674 7.87498C4.37288 8.03019 4.58409 8.1173 4.80424 8.1173C5.0244 8.1173 5.23561 8.03019 5.39174 7.87498L11.5417 1.72498C11.6198 1.64751 11.6818 1.55534 11.7241 1.45379C11.7665 1.35224 11.7882 1.24332 11.7882 1.13331C11.7882 1.0233 11.7665 0.914379 11.7241 0.81283C11.6818 0.711281 11.6198 0.619113 11.5417 0.541643C11.3856 0.386434 11.1744 0.299316 10.9542 0.299316C10.7341 0.299316 10.5229 0.386434 10.3667 0.541643Z" fill="white"/></svg>')}")`
},
}
},
'.checkbox-sm[type="checkbox"]': {
'border-radius': theme('custom.components.checkbox.sm.borderRadius'),
'height': theme('custom.components.checkbox.sm.size'),
'width': theme('custom.components.checkbox.sm.size'),
'&:checked, &[aria-checked="true"]': {
'background-image': `url("${svgToDataUri('<svg xmlns="http://www.w3.org/2000/svg" width="10" height="7" viewBox="0 0 10 7" fill="none"><path d="M8.4932 0.23329L4.03986 4.68662L1.4532 2.09996C1.32829 1.97579 1.15932 1.9061 0.983198 1.9061C0.807074 1.9061 0.638106 1.97579 0.513198 2.09996C0.38903 2.22487 0.319336 2.39383 0.319336 2.56996C0.319336 2.74608 0.38903 2.91505 0.513198 3.03996L3.5732 6.09996C3.69811 6.22412 3.86707 6.29382 4.0432 6.29382C4.21932 6.29382 4.38829 6.22412 4.5132 6.09996L9.4332 1.17996C9.49568 1.11798 9.54528 1.04425 9.57912 0.963008C9.61297 0.881768 9.6304 0.794632 9.6304 0.706624C9.6304 0.618616 9.61297 0.531479 9.57912 0.45024C9.54528 0.369 9.49568 0.295266 9.4332 0.23329C9.30829 0.109123 9.13932 0.0394287 8.9632 0.0394287C8.78707 0.0394287 8.61811 0.109123 8.4932 0.23329Z" fill="white"/></svg>')}")`
},
'&:indeterminate': {
'background-image': `url("${svgToDataUri('<svg xmlns="http://www.w3.org/2000/svg" width="10" height="2" viewBox="0 0 10 2" fill="none"><path d="M9.04638 0.293335L1.03971 0.333335C0.862903 0.333335 0.693333 0.403573 0.568309 0.528598C0.443285 0.653622 0.373047 0.823191 0.373047 1C0.373047 1.17681 0.443285 1.34638 0.568309 1.47141C0.693333 1.59643 0.862903 1.66667 1.03971 1.66667L9.03971 1.62667C9.21653 1.62667 9.3861 1.55643 9.51112 1.43141C9.63614 1.30638 9.70638 1.13681 9.70638 0.960002C9.70638 0.783191 9.63614 0.613622 9.51112 0.488597C9.3861 0.363573 9.21653 0.293335 9.03971 0.293335H9.04638Z" fill="white"/></svg>')}")`
}
},
'.checkbox-lg[type="checkbox"]': {
'border-radius': theme('custom.components.checkbox.lg.borderRadius'),
'height': theme('custom.components.checkbox.lg.size'),
'width': theme('custom.components.checkbox.lg.size'),
'&:checked, &[aria-checked="true"]': {
'background-image': `url("${svgToDataUri('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="10" viewBox="0 0 15 10" fill="none"><path d="M13.2403 0.849997L6.56029 7.53L2.68028 3.65C2.49292 3.46375 2.23947 3.3592 1.97528 3.3592C1.7111 3.3592 1.45765 3.46375 1.27028 3.65C1.08403 3.83736 0.979492 4.09081 0.979492 4.355C0.979492 4.61918 1.08403 4.87263 1.27028 5.06L5.86028 9.65C6.04765 9.83625 6.3011 9.94079 6.56528 9.94079C6.82947 9.94079 7.08292 9.83625 7.27029 9.65L14.6503 2.27C14.744 2.17703 14.8184 2.06643 14.8692 1.94457C14.9199 1.82271 14.9461 1.69201 14.9461 1.56C14.9461 1.42799 14.9199 1.29728 14.8692 1.17542C14.8184 1.05356 14.744 0.94296 14.6503 0.849997C14.4629 0.663746 14.2095 0.559204 13.9453 0.559204C13.6811 0.559204 13.4276 0.663746 13.2403 0.849997Z" fill="white"/></svg>')}")`
},
'&:indeterminate': {
'background-image': `url("${svgToDataUri('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="3" viewBox="0 0 15 3" fill="none"><path d="M13.0696 0.939941L1.05957 0.999942C0.794354 0.999942 0.54 1.1053 0.352464 1.29284C0.164927 1.48037 0.0595703 1.73473 0.0595703 1.99994C0.0595703 2.26516 0.164927 2.51951 0.352464 2.70705C0.54 2.89458 0.794354 2.99994 1.05957 2.99994L13.0596 2.93994C13.3248 2.93994 13.5791 2.83459 13.7667 2.64705C13.9542 2.45951 14.0596 2.20516 14.0596 1.93994C14.0596 1.67472 13.9542 1.42037 13.7667 1.23283C13.5791 1.0453 13.3248 0.939941 13.0596 0.939941H13.0696Z" fill="white"/></svg>')}")`
}
}
});
// Group & labels
addComponents({
'.checkbox-group': {
'display': 'flex',
'align-items': 'center',
'gap': '0.4rem',
},
'.checkbox-label': {
'color': 'var(--tw-gray-800)',
'font-weight': theme('fontWeight.medium'),
'font-size': theme('fontSize.2sm'),
'line-height': theme('fontSize.2sm.1.lineHeight')
},
'.checkbox-label-lg': {
'font-size': theme('fontSize.sm'),
'line-height': theme('fontSize.sm.1.lineHeight')
}
});
});

38
src/plugins/components/container.js Normal file
View File

@ -0,0 +1,38 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({ addComponents, theme }) => {
// Fixed
addComponents({
'.container-fixed': {
'flex-grow': '1',
width: '100%',
'padding-inline-start': theme('custom.components.container.fixed.px.DEFAULT'), // Logical property for LTR/RTL
'padding-inline-end': theme('custom.components.container.fixed.px.DEFAULT') // Logical property for LTR/RTL
},
[`@media (min-width: ${theme('screens.xl')})`]: {
'.container-fixed': {
'margin-inline-start': 'auto', // Logical property for LTR/RTL
'margin-inline-end': 'auto', // Logical property for LTR/RTL
'padding-inline-start': theme('custom.components.container.fixed.px.xl'), // Logical property for LTR/RTL
'padding-inline-end': theme('custom.components.container.fixed.px.xl') // Logical property for LTR/RTL
// 'max-width': theme('custom.components.container.fixed')['max-width'],
}
}
});
// Fluid
addComponents({
'.container-fluid': {
width: '100%',
'flex-grow': '1',
'padding-inline-start': theme('custom.components.container.fluid.px.DEFAULT'), // Logical property for LTR/RTL
'padding-inline-end': theme('custom.components.container.fluid.px.DEFAULT') // Logical property for LTR/RTL
},
[`@media (min-width: ${theme('screens.xl')})`]: {
'.container-fluid': {
'padding-inline-start': theme('custom.components.container.fluid.px.xl'), // Logical property for LTR/RTL
'padding-inline-end': theme('custom.components.container.fluid.px.xl') // Logical property for LTR/RTL
}
}
});
});

60
src/plugins/components/drawer.js Normal file
View File

@ -0,0 +1,60 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({ addComponents }) => {
addComponents({
'.drawer': {
'transition': 'transform 300ms ease',
'position': 'fixed',
'background-color': 'var(--tw-drawer-background-color)',
'&.open': {
'box-shadow': 'var(--tw-drawer-box-shadow)',
'transition': 'transform 300ms ease'
},
},
'.drawer-start': {
'top': '0',
'bottom': '0',
'inset-inline-start': '0',
'inset-inline-end': 'auto',
'transform': 'translateX(-100%)',
'&.drawer.open': {
'transform': 'translateX(0)'
}
},
'.drawer-end': {
'top': '0',
'bottom': '0',
'inset-inline-end': '0',
'inset-inline-start': 'auto',
'transform': 'translateX(100%)',
'&.drawer.open': {
'transform': 'translateX(0)'
}
},
'.drawer-top': {
'top': '0',
'bottom': 'auto',
'inset-inline-start': '0',
'inset-inline-end': '0',
'transform': 'translateY(-100%)',
'&.drawer.open': {
'transform': 'translateY(0)'
}
},
'.drawer-bottom': {
'bottom': '0',
'top': 'auto',
'inset-inline-start': '0',
'inset-inline-end': '0',
'transform': 'translateY(100%)',
'&.drawer.open': {
'transform': 'translateY(0)'
}
},
'.drawer-backdrop': {
'position': 'fixed',
'inset': 0,
'background-color': 'var(--tw-backdrop-background-color)'
}
});
});

34
src/plugins/components/dropdown.js Normal file
View File

@ -0,0 +1,34 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({ addComponents, theme }) => {
// Base
addComponents({
'.dropdown': {
'display': 'flex',
},
'.dropdown-content': {
'display': 'none',
'align-items': 'stretch',
'flex-direction': 'column',
'border': 'var(--tw-dropdown-border)',
'box-shadow': 'var(--tw-dropdown-box-shadow)',
'background-color': 'var(--tw-dropdown-background-color)',
'border-radius': theme('custom.components.common.borderRadius.dropdown'),
'.open.dropdown > &, &.open[data-popper-placement]': {
'will-change': 'transform',
},
},
});
// Utilities
addComponents({
'.modal-rounded-t': {
'border-start-start-radius': theme('custom.components.common.borderRadius.dropdown'),
'border-start-end-radius': theme('custom.components.common.borderRadius.dropdown'),
},
'.modal-rounded-b': {
'border-end-start-radius': theme('custom.components.common.borderRadius.dropdown'),
'border-end-end-radius': theme('custom.components.common.borderRadius.dropdown'),
},
});
});

87
src/plugins/components/file-input.js Normal file
View File

@ -0,0 +1,87 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({ addComponents, theme }) => {
// Form input
addComponents({
'.file-input': {
'display': 'block',
'width': '100%',
'appearance': 'none',
'box-shadow': 'none',
'outline': 'none',
'font-weight': theme('custom.components.btn.DEFAULT.fontWeight'),
'font-size': theme('custom.components.btn.DEFAULT.fontSize'),
'line-height': '1',
'background-color': 'var(--tw-light-active)',
'border-radius': theme('custom.components.common.borderRadius.btn'),
'height': theme('custom.components.btn.DEFAULT.height'),
'padding': '0',
'padding-inline-end': theme('custom.components.btn.DEFAULT.px'),
'border': '1px solid var(--tw-gray-300)',
'color': 'var(--tw-gray-700)',
'&::placeholder': {
'color': 'var(--tw-gray-500)',
},
'&::file-selector-button': {
'color': 'var(--tw-gray-600)',
'height': '100%',
'appearance': 'none',
'padding-inline-start': theme('custom.components.btn.DEFAULT.px'),
'padding-inline-end': theme('custom.components.btn.DEFAULT.px'),
'margin-inline-end': theme('custom.components.btn.DEFAULT.px'),
'outline': 'none',
'background-color': 'transparent',
'border-start-start-radius': theme('custom.components.common.borderRadius.btn'),
'border-end-start-radius': theme('custom.components.common.borderRadius.btn'),
'border': '0',
'border-inline-end': '1px solid var(--tw-gray-300)',
'box-shadow': 'none',
},
'&:hover': {
'border-color': 'var(--tw-gray-400)',
},
'&:focus': {
'border-color': 'var(--tw-primary)',
'box-shadow': 'var(--tw-input-focus-box-shadow)',
'color': 'var(--tw-gray-700)',
'&::placeholder': {
'color': 'var(--tw-gray-600)',
},
},
'&:active': {
'color': 'var(--tw-gray-700)',
'&::placeholder': {
'color': 'var(--tw-gray-600)',
},
'box-shadow': 'none',
},
'&:disabled': {
'background-color': 'var(--tw-gray-100)',
'color': 'var(--tw-gray-400)',
'&::placeholder': {
'color': 'var(--tw-gray-300)',
},
},
},
'.file-input-sm': {
'font-weight': theme('custom.components.btn.sm.fontWeight'),
'font-size': theme('custom.components.btn.sm.fontSize'),
'height': theme('custom.components.btn.sm.height'),
'padding-inline-end': theme('custom.components.btn.sm.px'),
'&::file-selector-button': {
'padding-inline-start': theme('custom.components.btn.sm.px'),
'padding-inline-end': theme('custom.components.btn.sm.px'),
},
},
'.file-input-lg': {
'font-weight': theme('custom.components.btn.lg.fontWeight'),
'font-size': theme('custom.components.btn.lg.fontSize'),
'height': theme('custom.components.btn.lg.height'),
'padding-inline-end': theme('custom.components.btn.lg.px'),
'&::file-selector-button': {
'padding-inline-start': theme('custom.components.btn.lg.px'),
'padding-inline-end': theme('custom.components.btn.lg.px'),
},
},
});
});

39
src/plugins/components/image-input.js Normal file
View File

@ -0,0 +1,39 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({addComponents}) => {
// Base
addComponents({
'.image-input': {
'display': 'inline-flex',
'position': 'relative',
'align-items': 'stretch',
'justify-content': 'center',
'input[type="file"]': {
'appearance': 'none',
'position': 'absolute',
'width': '0 !important',
'height': '0 !important',
'overflow': 'hidden',
'opacity': '0',
},
'.image-input-preview': {
'cursor': 'pointer',
'position': 'relative',
'overflow': 'hidden',
'width': '100%',
'height': '100%',
'background-size': 'cover',
'background-repeat': 'no-repeat',
},
'.image-input-placeholder': {
'position': 'relative',
'overflow': 'hidden',
'width': '100%',
'height': '100%',
'background-size': 'cover',
'background-repeat': 'no-repeat',
}
},
});
});

37
src/plugins/components/input-group.js Normal file
View File

@ -0,0 +1,37 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({ addComponents }) => {
// Form input
addComponents({
'.input-group': {
'display': 'flex',
'align-items': 'stretch',
'.btn': {
'flex-shrink': '0',
},
'.input': {
'flex-grow': '1',
},
'.input ~ .btn, .input ~ .dropdown > .btn': {
'border-start-start-radius': '0',
'border-end-start-radius': '0',
},
'.input + .btn, .input + .dropdown > .btn': {
'border-inline-start': '0',
},
'.btn ~ .input, .btn ~ .btn, .input ~ .input': {
'border-start-start-radius': '0',
'border-end-start-radius': '0',
},
'.input:has(~ .btn), .input:has(~ .input), .input:has(~ .dropdown > .btn)': {
'border-start-end-radius': '0',
'border-end-end-radius': '0',
},
'.btn:has(~ .input, ~ .btn), .input:has(~ .input)': {
'border-start-end-radius': '0',
'border-end-end-radius': '0',
'border-inline-end': '0',
},
},
});
});

116
src/plugins/components/input.js Normal file
View File

@ -0,0 +1,116 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({ addComponents, theme }) => {
// Form input
addComponents({
'.input': {
'display': 'block',
'width': '100%',
'appearance': 'none',
'box-shadow': 'none',
'outline': 'none',
'font-weight': theme('custom.components.btn.DEFAULT.fontWeight'),
'font-size': theme('custom.components.btn.DEFAULT.fontSize'),
'line-height': '1',
'background-color': 'var(--tw-light-active)',
'border-radius': theme('custom.components.common.borderRadius.btn'),
'height': theme('custom.components.btn.DEFAULT.height'),
'padding-inline-start': theme('custom.components.input.DEFAULT.px'),
'padding-inline-end': theme('custom.components.input.DEFAULT.px'),
'border': '1px solid var(--tw-gray-300)',
'color': 'var(--tw-gray-700)',
'&::placeholder, input::placeholder': {
'color': 'var(--tw-gray-500)',
},
'&:hover': {
'border-color': 'var(--tw-gray-400)',
},
'&:focus, &:has(input:focus)': {
'border-color': 'var(--tw-primary)',
'box-shadow': 'var(--tw-input-focus-box-shadow)',
'color': 'var(--tw-gray-700)',
'&::placeholder, input::placeholder': {
'color': 'var(--tw-gray-600)',
},
},
'&:active, &:has(input:active)': {
'color': 'var(--tw-gray-700)',
'&::placeholder, input::placeholder': {
'color': 'var(--tw-gray-600)',
},
'box-shadow': 'none',
},
'&:disabled, &:has(input:disabled)': {
'background-color': 'var(--tw-gray-100)',
'color': 'var(--tw-gray-400)',
'&::placeholder, input::placeholder': {
'color': 'var(--tw-gray-300)',
},
},
},
'.input-sm': {
'font-weight': theme('custom.components.btn.sm.fontWeight'),
'font-size': theme('custom.components.btn.sm.fontSize'),
'height': theme('custom.components.btn.sm.height'),
'padding-inline-start': theme('custom.components.input.sm.px'),
'padding-inline-end': theme('custom.components.input.sm.px'),
},
'.input-lg': {
'font-weight': theme('custom.components.btn.lg.fontWeight'),
'font-size': theme('custom.components.btn.lg.fontSize'),
'height': theme('custom.components.btn.lg.height'),
'padding-inline-start': theme('custom.components.input.lg.px'),
'padding-inline-end': theme('custom.components.input.lg.px'),
},
});
// Form input with icons
addComponents({
'.input:not(input)': {
'display': 'flex',
'gap': '0.375rem',
'align-items': 'center',
'appearance': 'none',
'box-shadow': 'none',
'outline': 'none',
'color': 'var(--tw-gray-600)',
'input': {
'flex-grow': '1',
'background-color': 'transparent',
'border-color': 'transparent',
'color': 'inherit',
'outline': 'none',
'font-size': 'inherit',
'font-weight': 'inherit',
},
'i': {
'font-size': theme('custom.components.btn.DEFAULT.iconFontSize'),
},
'.btn-icon': {
'border': '0',
'height': 'auto',
'width': 'auto',
'&:hover, &:focus, &:active, &.active': {
'i': {
'color': 'var(--tw-gray-800)',
},
},
},
},
'.input:not(input).input-xs': {
'i': {
'font-size': theme('custom.components.btn.xs.iconFontSize'),
},
},
'.input:not(input).input-sm': {
'i': {
'font-size': theme('custom.components.btn.sm.iconFontSize'),
},
},
'.input:not(input).input-lg': {
'i': {
'font-size': theme('custom.components.btn.lg.iconFontSize'),
},
},
});
});

22
src/plugins/components/leaflet.js Normal file
View File

@ -0,0 +1,22 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({addComponents, theme}) => {
// Base
addComponents({
'.leaflet-container': {
'.leaflet-pane, .leaflet-top, .leaflet-bottom, .leaflet-control': {
'z-index': '1 !important'
},
'.leaflet-popup-content-wrapper': {
'border-radius': theme('custom.components.common.borderRadius.dropdown'),
'text-align': 'center',
'background-color': 'var(--tw-dropdown-background-color)',
'.leaflet-popup-content': {
'font-family': 'inherit',
'font-size': theme('fontSize.2sm')
}
}
}
});
});

140
src/plugins/components/menu.js Normal file
View File

@ -0,0 +1,140 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({ addComponents, theme }) => {
// Menu dropdown
addComponents({
'.menu-dropdown': {
'gap': '0.125rem',
'border': 'var(--tw-dropdown-border)',
'box-shadow': 'var(--tw-dropdown-box-shadow)',
'background-color': 'var(--tw-dropdown-background-color)',
'border-radius': theme('custom.components.common.borderRadius.dropdown'),
},
});
// Menu default
addComponents({
'.menu-default': {
'padding-top': theme('spacing')['2.5'],
'padding-bottom': theme('spacing')['2.5'],
'.menu-link, .menu-label': {
'margin-inline-start': theme('spacing')['2.5'],
'margin-inline-end': theme('spacing')['2.5'],
'padding': theme('spacing')['2.5'],
'border-radius': theme('borderRadius.md'),
},
'.menu-title': {
'font-size': theme('fontSize.2sm'),
'line-height': theme('fontSize.2sm.1.lineHeight'),
'font-weight': theme('fontWeight.medium'),
},
'.menu-icon': {
'margin-inline-end': theme('spacing')['2.5'],
'i': {
'font-size': theme('fontSize.lg'),
},
},
'.menu-bullet': {
'margin-inline-end': theme('spacing')['2.5'],
},
'.menu-arrow': {
'margin-inline-start': theme('spacing')['2'],
'i': {
'font-size': theme('fontSize.2xs'),
},
},
'.menu-badge': {
'margin-inline-start': theme('spacing')['2.5'],
},
'.menu-separator': {
'border-bottom': 'var(--tw-dropdown-border)',
'margin-top': theme('spacing')['2.5'],
'margin-bottom': theme('spacing')['2.5'],
},
'.menu-accordion:not(.menu-no-indent)': {
'.menu-item > .menu-link, .menu-item > .menu-label': {
'margin-inline-start': theme('spacing')['5'],
},
'.menu-item > .menu-accordion .menu-item > .menu-link, .menu-item > .menu-accordion .menu-item > .menu-label': {
'margin-inline-start': theme('spacing')['8'],
},
'.menu-item > .menu-accordion .menu-item > .menu-accordion .menu-item > .menu-link, .menu-item > .menu-accordion .menu-item > .menu-accordion .menu-item > .menu-label': {
'margin-inline-start': theme('spacing')['11'],
},
'.menu-item > .menu-accordion .menu-item > .menu-accordion .menu-item > .menu-accordion .menu-item > .menu-link, .menu-item > .menu-accordion .menu-item > .menu-accordion .menu-item > .menu-accordion .menu-item > .menu-label': {
'margin-inline-start': theme('spacing')['14'],
}
},
},
'.menu-fit': {
'padding-top': '0',
'padding-bottom': '0',
'.menu-link, .menu-label': {
'margin-inline-start': '0',
'margin-inline-end': '0',
},
},
'.menu-space': {
'padding-top': theme('spacing')['2.5'],
'padding-bottom': theme('spacing')['2.5'],
'.menu-link, .menu-label': {
'margin-inline-start': theme('spacing')['2.5'],
'margin-inline-end': theme('spacing')['2.5'],
},
},
});
// Menu theming
addComponents({
'.menu-default': {
'.menu-item': {
'.menu-title': {
'color': 'var(--tw-gray-800)',
},
'.menu-icon i': {
'color': 'var(--tw-gray-500)',
},
'.menu-arrow i': {
'color': 'var(--tw-gray-500)',
},
'.menu-link:hover, .menu-label:hover': {
'.menu-title': {
'color': 'var(--tw-gray-900)',
},
'.menu-icon i': {
'color': 'var(--tw-primary)',
},
},
'&.active, &.show, &.here, &.focus': {
'> .menu-link, > .menu-label': {
'.menu-title': {
'color': 'var(--tw-gray-900)',
},
'.menu-icon i': {
'color': 'var(--tw-primary)',
},
},
},
'&.active, &.here': {
'> .menu-link, > .menu-label': {
'background-color': 'var(--tw-gray-100)',
'.dark &': {
'background-color': 'var(--tw-coal-300)',
},
},
},
'& > .menu-link:hover, & > .menu-label:hover': {
'background-color': 'var(--tw-gray-100)',
'.dark &': {
'background-color': 'var(--tw-coal-300)',
},
},
'&.disabled': {
'> .menu-link, > .menu-label': {
'opacity': '0.5',
},
},
},
},
});
});

125
src/plugins/components/modal.js Normal file
View File

@ -0,0 +1,125 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({ addComponents, theme }) => {
// Base
addComponents({
'.modal': {
'width': '100%',
'display': 'none',
'opacity': '0',
'position': 'fixed',
'overflow': 'auto',
'inset': '0',
'padding': theme('spacing.5'),
'transition': 'opacity 300ms ease',
'&.open': {
'opacity': '1',
'transition': 'opacity 300ms ease',
},
},
'.modal-content': {
'position': 'relative',
'margin-left': 'auto',
'margin-right': 'auto',
'border-radius': theme('custom.components.common.borderRadius.modal'),
'box-shadow': 'var(--tw-modal-box-shadow)',
'background-color': 'var(--tw-modal-background-color)',
'display': 'flex',
'flex-direction': 'column',
'outline': 'none',
},
'.modal-header': {
'display': 'flex',
'align-items': 'center',
'justify-content': 'space-between',
'border-bottom': '1px solid var(--tw-gray-200)',
'padding-inline-start': theme('spacing')['5'],
'padding-inline-end': theme('spacing')['5'],
'padding-block-start': theme('spacing')['2.5'],
'padding-block-end': theme('spacing')['2.5'],
},
'.modal-title': {
'font-size': theme('fontSize.sm'),
'line-height': theme('fontSize.sm.1.lineHeight'),
'font-weight': theme('fontWeight.semibold'),
'color': 'var(--tw-gray-900)',
},
'.modal-body': {
'padding-inline-start': theme('spacing')['5'],
'padding-inline-end': theme('spacing')['5'],
'padding-block-start': theme('spacing')['2.5'],
'padding-block-end': theme('spacing')['2.5'],
'outline': 'none',
},
'.modal-footer': {
'display': 'flex',
'align-items': 'center',
'justify-content': 'space-between',
'border-top': '1px solid var(--tw-gray-200)',
'padding-inline-start': theme('spacing')['5'],
'padding-inline-end': theme('spacing')['5'],
'padding-block-start': theme('spacing')['2.5'],
'padding-block-end': theme('spacing')['2.5'],
},
'.modal-table': {
'.table': {
'th:first-child, td:first-child': {
'padding-inline-start': theme('spacing')['5'],
},
'th:last-child, td:last-child': {
'padding-inline-end': theme('spacing')['5'],
},
},
},
'.modal-backdrop': {
'position': 'fixed',
'inset': 0,
'background-color': 'var(--tw-backdrop-background-color)',
},
});
// Utilities
addComponents({
'.modal-dialog': {
'inset': 'auto',
},
'.modal-overlay': {
'inset': '0',
'height': '100%',
},
'.modal-center': {
'left': '50%',
'top': '50%',
'margin-left': '0',
'margin-right': '0',
'transform': 'translate(-50%, -50%)',
},
'.modal-center-y': {
'top': '50%',
'transform': 'translateY(-50%)',
},
'.modal-center-x': {
'inset-inline-start': '50%',
'transform': 'translateX(-50%)',
},
'.modal-rounded-t': {
'border-start-start-radius': theme('custom.components.common.borderRadius.modal'),
'border-start-end-radius': theme('custom.components.common.borderRadius.modal'),
},
'.modal-rounded-b': {
'border-end-start-radius': theme('custom.components.common.borderRadius.modal'),
'border-end-end-radius': theme('custom.components.common.borderRadius.modal'),
}
});
// RTL
addComponents({
'[dir=rtl]': {
'.modal-center': {
'left': 'auto',
'right': '50%',
'transform': 'translate(50%, -50%)',
}
}
});
});

63
src/plugins/components/pagination.js Normal file
View File

@ -0,0 +1,63 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({ addComponents, theme }) => {
addComponents({
'.pagination': {
'display': 'inline-flex',
'align-items': 'center',
'gap': '0.25rem',
'.btn': {
'display': 'inline-flex',
'flex-shrink': '0',
'justify-content': 'center',
'height': '1.875rem',
'width': '1.875rem',
'font-size': theme('fontSize.2sm'),
'padding': '0',
'line-height': '0',
'color': 'var(--tw-gray-600)',
'i': {
'font-size': theme('fontSize.base'),
'color': 'var(--tw-gray-700)',
},
'&:hover, &:focus, &:active, &.active': {
'background-color': 'var(--tw-gray-200)',
'color': 'var(--tw-gray-800)',
'i': {
'color': 'var(--tw-gray-900)',
},
},
'&[disabled], &.disabled': {
'opacity': '1',
'pointer-events': 'none',
'color': 'var(--tw-gray-500)',
'i': {
'color': 'var(--tw-gray-400)',
},
},
},
'&.pagination-sm': {
'gap': '0.175rem',
'.btn': {
'height': '1.575rem',
'width': '1.575rem',
'font-size': theme('fontSize.xs'),
'i': {
'font-size': theme('fontSize.sm'),
},
},
},
'&.pagination-lg': {
'gap': '0.35rem',
'.btn': {
'height': '2.275rem',
'width': '2.275rem',
'font-size': theme('fontSize.sm'),
'i': {
'font-size': theme('fontSize.xl'),
},
},
},
},
});
});

32
src/plugins/components/popover.js Normal file
View File

@ -0,0 +1,32 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({addComponents, theme}) => {
addComponents({
'.popover': {
'display': 'none',
'box-shadow': 'var(--tw-popover-box-shadow)',
'background-color': 'var(--tw-popover-background-color)',
'border-radius': theme('custom.components.common.borderRadius.popover'),
'border': 'var(--tw-popover-border)',
'&.show': {
'display': 'block'
}
},
'.popover-header': {
'padding': '0.50rem 0.75rem',
'font-size': theme('fontSize.sm'),
'line-height': theme('fontSize.sm.1.lineHeight'),
'font-weight': theme('fontWeight.medium'),
'color': 'var(--tw-gray-900)',
'border-bottom': '1px solid var(--tw-gray-200)',
},
'.popover-body': {
'padding': '0.75rem 0.75rem',
'font-size': theme('fontSize.2sm'),
'line-height': theme('fontSize.2sm.1.lineHeight'),
'font-weight': theme('fontWeight.normal'),
'color': 'var(--tw-gray-700)'
}
});
});

40
src/plugins/components/progress.js Normal file
View File

@ -0,0 +1,40 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({addComponents, theme}) => {
// Base
addComponents({
'.progress': {
'width': '100%',
'display': 'flex',
'min-height': '4px',
'overflow': 'hidden',
'background-color': 'var(--tw-gray-100)',
'border-radius': theme('custom.components.common.borderRadius.progress'),
},
'.progress-bar': {
'display': 'flex',
'flex-direction': 'column',
'justify-content': 'center',
'overflow': 'hidden',
'text-align': 'center',
'white-space': 'nowrap',
'background-color': 'var(--tw-gray-300)',
'border-radius': theme('custom.components.common.borderRadius.progress'),
}
});
// Color options
const colors = ['primary', 'success', 'danger', 'warning', 'info', 'dark'];
colors.forEach((color) => {
addComponents({
[`.progress-${color}`]: {
'background-color': `var(--tw-${color}-light)`,
'.progress-bar': {
'background-color': `var(--tw-${color})`
}
}
});
});
});

90
src/plugins/components/radio.js Normal file
View File

@ -0,0 +1,90 @@
import plugin from 'tailwindcss/plugin';
import svgToDataUri from 'mini-svg-data-uri';
export default plugin(({ addComponents, theme }) => {
// Radio
addComponents({
'.radio[type="radio"]': {
'flex-shrink': '0',
'appearance': 'none',
'box-shadow': 'none',
'background-color': 'var(--tw-light-light)',
'.dark &': {
'background-color': 'var(--tw-coal-500)',
},
'border-radius': '50%',
'height': theme('custom.components.radio.DEFAULT.size'),
'width': theme('custom.components.radio.DEFAULT.size'),
'border': '1px solid var(--tw-gray-300)',
'background-repeat': 'no-repeat',
'background-size': 'contain',
'background-position': 'center',
'&:checked, &[aria-checked="true"]': {
'background-color': 'var(--tw-primary)',
'border': '1px solid var(--tw-primary)',
'background-image': `url("${svgToDataUri('<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none"><circle cx="10.9995" cy="11" r="5.86667" fill="white"/></svg>')}")`,
},
'&:focus-visible': {
'outline': 'none',
'box-shadow': 'none'
},
'&:focus': {
'border-color': 'var(--tw-primary)',
'box-shadow': 'var(--tw-input-focus-box-shadow)',
'color': 'var(--tw-gray-700)',
'&::placeholder': {
'color': 'var(--tw-gray-600)',
},
},
'&:active': {
'color': 'var(--tw-gray-700)',
'&::placeholder': {
'color': 'var(--tw-gray-600)',
},
'box-shadow': 'none',
},
'&:disabled': {
'cursor': 'not-allowed',
'background-color': 'var(--tw-gray-200)',
'border': '1px solid var(--tw-gray-300)',
'&:checked, &[aria-checked="true"]': {
'background-color': 'var(--tw-primary-clarity)',
'border': '0',
},
},
},
'.radio-sm[type="radio"]': {
'height': theme('custom.components.radio.sm.size'),
'width': theme('custom.components.radio.sm.size'),
'&:checked, &[aria-checked="true"]': {
'background-image': `url("${svgToDataUri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9.0002" cy="8.99995" r="4.8" fill="white"/></svg>')}")`,
},
},
'.radio-lg[type="radio"]': {
'height': theme('custom.components.radio.lg.size'),
'width': theme('custom.components.radio.lg.size'),
'&:checked, &[aria-checked="true"]': {
'background-image': `url("${svgToDataUri('<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none"><circle cx="12.9997" cy="13" r="6.93333" fill="white"/></svg>')}")`,
},
},
});
// Group & labels
addComponents({
'.radio-group': {
'display': 'flex',
'align-items': 'center',
'gap': '0.4rem',
},
'.radio-label': {
'color': 'var(--tw-gray-800)',
'font-weight': theme('fontWeight.medium'),
'font-size': theme('fontSize.2sm'),
'line-height': theme('fontSize.2sm.1.lineHeight'),
},
'.radio-label-lg': {
'font-size': theme('fontSize.sm'),
'line-height': theme('fontSize.sm.1.lineHeight'),
},
});
});

74
src/plugins/components/range.js Normal file
View File

@ -0,0 +1,74 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({addComponents}) => {
addComponents({
'.range': {
'width': '100%',
'height': '0.5rem',
'padding': '0',
'appearance': 'none',
'&:focus': {
'outline': 0
},
'&::-moz-focus-outer': {
'border': '0'
},
'&::-webkit-slider-thumb': {
'width': '1.625rem',
'height': '1.625rem',
'margin-top': '-0.563rem',
'box-shadow': 'var(--tw-default-box-shadow)',
'appearance': 'none',
'border': '1px solid var(--tw-gray-200)',
'transition': 'background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
'border-radius': '50%',
'background-color': 'var(--tw-light)',
'&:active': {
'background-color': 'var(--tw-light)'
}
},
'&::-moz-range-thumb': {
'width': '1.625rem',
'height': '1.625rem',
'margin-top': '-0.563rem',
'box-shadow': 'var(--tw-default-box-shadow)',
'appearance': 'none',
'border': '1px solid var(--tw-gray-200)',
'transition': 'background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
'border-radius': '50%',
'background-color': 'var(--tw-light)',
'&:active': {
'background-color': 'var(--tw-light)'
}
},
'&::-moz-range-track': {
'width': '100%',
'height': '0.5rem',
'color': 'transparent',
'cursor': 'pointer',
'background-color': 'var(--tw-gray-200)',
'border-color': 'transparent',
'border-radius': '0.188rem'
},
'&::-webkit-slider-runnable-track': {
'width': '100%',
'height': '0.5rem',
'color': 'transparent',
'cursor': 'pointer',
'background-color': 'var(--tw-gray-200)',
'border-color': 'transparent',
'border-radius': '0.188rem'
},
'&:disabled': {
'pointer-events': 'none',
'&::-webkit-slider-thumb': {
'background-color': 'var(--tw-gray-100)'
},
'&::-moz-range-thumb': {
'background-color': 'var(--tw-gray-100)'
}
}
}
});
});

66
src/plugins/components/rating.js Normal file
View File

@ -0,0 +1,66 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({ addComponents, theme }) => {
addComponents({
'.rating': {
'display': 'inline-flex',
'align-items': 'stretch',
'input': {
'appearance': 'none',
'position': 'absolute',
'inset-inline-start': '9999px', // Logical property for RTL/LTR
'&[disabled]': {
'display': 'none',
},
},
},
'.rating-on': {
'color': 'var(--tw-warning)',
},
'.rating-off': {
'color': 'var(--tw-gray-400)',
},
'.rating-label': {
'display': 'inline-flex',
'align-items': 'center',
'.rating-on': {
'display': 'none',
},
'.rating-off': {
'display': 'inline-flex',
},
},
'.rating:hover label.rating-label, label.rating-label, label.rating-label.checked, div.rating-label.checked': {
'.rating-on': {
'display': 'inline-flex',
},
'.rating-off': {
'display': 'none',
},
},
'label.rating-label:hover ~ label.rating-label, .rating-input:checked ~ .rating-label': {
'.rating-on': {
'display': 'none',
},
'.rating-off': {
'display': 'inline-flex',
},
},
'.rating-label.indeterminate': {
'position': 'relative',
'.rating-on': {
'display': 'inline-flex',
'position': 'absolute',
'z-index': '1',
'overflow': 'hidden',
'inset-inline-start': '0', // Logical property for RTL/LTR
},
'.rating-off': {
'display': 'inline-flex',
},
},
'label.rating-label': {
'cursor': 'pointer',
},
});
});

63
src/plugins/components/scrollable.js Normal file
View File

@ -0,0 +1,63 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({addComponents, theme}) => {
addComponents({
'.scrollable, .scrollable-y, .scrollable-x, .scrollable-hover, .scrollable-y-hover, .scrollable-x-hover, .scrollable-auto, .scrollable-y-auto, .scrollable-x-auto': {
'scrollbar-width': 'thin',
'scrollbar-color': 'transparent transparent',
'position': 'relative',
'&::-webkit-scrollbar': {
'width': '0.35rem',
'height': '0.35rem',
},
'&::-webkit-scrollbar-track': {
'background-color': 'transparent'
},
'&::-webkit-scrollbar-thumb': {
'border-radius': '1.25rem',
},
'&::-webkit-scrollbar-corner': {
'background-color': 'transparent'
}
},
'.scrollable, .scrollable-hover': {
'overflow': 'scroll',
},
'.scrollable-y, .scrollable-y-hover': {
'overflow-y': 'scroll',
},
'.scrollable-x, .scrollable-x-hover': {
'overflow-x': 'scroll',
},
'.scrollable-auto': {
'overflow': 'auto',
},
'.scrollable-y-auto': {
'overflow-y': 'auto',
},
'.scrollable-x-auto': {
'overflow-x': 'auto',
},
'.scrollable, .scrollable-y, .scrollable-x, .scrollable-auto, .scrollable-y-auto, .scrollable-x-auto, .scrollable-hover:hover, .scrollable-y-hover:hover, .scrollable-x-hover:hover': {
'scrollbar-color': 'var(--tw-scrollbar-thumb-color, var(--tw-gray-200)) transparent',
'&::-webkit-scrollbar-thumb': {
'background-color': 'var(--tw-scrollbar-thumb-color, var(--tw-gray-200))',
},
'&::-webkit-scrollbar-corner': {
'background-color': 'transparent'
}
},
[`@media (max-width: ${theme('screens.lg')})`]: {
'.scrollable, .scrollable-hover': {
'overflow': 'auto',
},
'.scrollable-y, .scrollable-y-hover': {
'overflow-y': 'auto',
},
'.scrollable-x, .scrollable-x-hover': {
'overflow-x': 'auto',
},
},
});
});

87
src/plugins/components/select.js Normal file
View File

@ -0,0 +1,87 @@
import plugin from 'tailwindcss/plugin';
import svgToDataUri from 'mini-svg-data-uri';
export default plugin(({ addComponents, theme }) => {
addComponents({
'.select': {
'display': 'block',
'width': '100%',
'appearance': 'none',
'box-shadow': 'none',
'outline': 'none',
'background-repeat': 'no-repeat',
'background-position': `right 0.675rem center`, // Logical property for RTL/LTR
'background-size': '14px 11px',
'background-image': `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="${theme('base.colors.gray.light.600')}" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m2 5 6 6 6-6"/></svg>`)}")`,
'.dark &': {
'background-image': `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="${theme('base.colors.gray.dark.600')}" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m2 5 6 6 6-6"/></svg>`)}")`,
},
'&[multiple], &[size]:not([size="1"])': {
'padding-inline-end': `${theme('custom.components.btn.DEFAULT.px')}`, // Logical property for RTL/LTR
'background-image': 'none',
},
'&:-moz-focusring': {
'color': 'transparent',
'text-shadow': 'none',
},
'font-weight': theme('custom.components.btn.DEFAULT.fontWeight'),
'font-size': theme('custom.components.btn.DEFAULT.fontSize'),
'line-height': '1',
'background-color': 'var(--tw-light-active)',
'border-radius': theme('custom.components.common.borderRadius.btn'),
'height': theme('custom.components.btn.DEFAULT.height'),
'padding-inline-start': theme('custom.components.input.DEFAULT.px'), // Logical property for RTL/LTR
'padding-inline-end': theme('custom.components.input.DEFAULT.px'), // Logical property for RTL/LTR
'border': '1px solid var(--tw-gray-300)',
'color': 'var(--tw-gray-700)',
'&:hover': {
'border-color': 'var(--tw-gray-400)',
},
'&:focus': {
'border-color': 'var(--tw-primary)',
'box-shadow': 'var(--tw-input-focus-box-shadow)',
'color': 'var(--tw-gray-700)',
'&::placeholder': {
'color': 'var(--tw-gray-600)',
},
},
'&:active': {
'color': 'var(--tw-gray-700)',
'&::placeholder': {
'color': 'var(--tw-gray-600)',
},
'box-shadow': 'none',
},
'&:disabled': {
'background-color': 'var(--tw-gray-100)',
'color': 'var(--tw-gray-400)',
'&::placeholder': {
'color': 'var(--tw-gray-300)',
},
},
},
'.select-sm': {
'font-weight': theme('custom.components.btn.sm.fontWeight'),
'font-size': theme('custom.components.btn.sm.fontSize'),
'height': theme('custom.components.btn.sm.height'),
'padding-inline-start': theme('custom.components.input.sm.px'), // Logical property for RTL/LTR
'padding-inline-end': theme('custom.components.input.sm.px'), // Logical property for RTL/LTR
'background-size': '14px 10px',
'background-position': `inset-inline-end 0.55rem center`, // Logical property for RTL/LTR
},
'.select-lg': {
'font-weight': theme('custom.components.btn.lg.fontWeight'),
'font-size': theme('custom.components.btn.lg.fontSize'),
'height': theme('custom.components.btn.lg.height'),
'padding-inline-start': theme('custom.components.input.lg.px'), // Logical property for RTL/LTR
'padding-inline-end': theme('custom.components.input.lg.px'), // Logical property for RTL/LTR
'background-size': '14px 12px',
'background-position': `inset-inline-end 0.75rem center`, // Logical property for RTL/LTR
},
'[dir=rtl]': {
'.select': {
'background-position': `left 0.675rem center`, // Logical property for RTL/LTR
}
}
});
});

124
src/plugins/components/switch.js Normal file
View File

@ -0,0 +1,124 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({ addVariant, addComponents, theme, e }) => {
addComponents({
'.switch': {
'display': 'flex',
'align-items': 'center',
'gap': theme('spacing')['2.5'],
'cursor': 'pointer',
'input[type=checkbox]': {
'display': 'flex',
'appearance': 'none',
'background-color': 'var(--tw-gray-300)',
'position': 'relative',
'cursor': 'pointer',
'flex-shrink': '0',
'height': theme('custom.components.switch.DEFAULT.height'),
'width': theme('custom.components.switch.DEFAULT.width'),
'border-radius': theme('custom.components.switch.DEFAULT.height'),
'transition': 'all .15s ease-in-out',
'&:before': {
'display': 'flex',
'position': 'absolute',
'content': '""',
'height': '1rem',
'width': '1rem',
'border-radius': '100%',
'background-color': 'var(--tw-light)',
'inset-inline-start': '0.25rem', // Logical property for RTL/LTR
'top': '50%',
'transform': 'translateY(-50%)',
'filter': 'drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.03))',
'transition': 'all .15s ease-in-out',
},
'&:checked, &[aria-checked="true"]': {
'background-color': 'var(--tw-primary)',
'transition': 'all .15s ease-in-out',
'&:before': {
'background-color': '#ffffff',
'transition': 'all .15s ease-in-out',
'inset-inline-start': 'calc(100% - 0.25rem)', // Logical property for RTL/LTR
'transform': 'translate(-100%, -50%)',
'filter': 'none',
},
},
'&:disabled': {
'background-color': 'var(--tw-gray-100)',
'border': '1px solid var(--tw-gray-300)',
'cursor': 'not-allowed',
'opacity': '0.5',
'&:before': {
'background-color': 'var(--tw-gray-300)',
},
'&:checked, &[aria-checked="true"]': {
'background-color': 'var(--tw-primary-clarity)',
'border': '0',
'&:before': {
'background-color': 'var(--tw-light)',
},
},
},
},
'.switch-label': {
'color': 'var(--tw-gray-700)',
'font-size': theme('fontSize.sm'),
'font-weight': theme('fontWeight.medium'),
'line-height': theme('lineHeight.4'),
},
'input[type=checkbox] + .switch-label': {
'color': 'var(--tw-gray-800)',
},
'&:has(input[type=checkbox]:disabled)': {
'.switch-label': {
'color': 'var(--tw-gray-500)',
},
},
},
'.switch-sm': {
'input[type=checkbox]': {
'height': theme('custom.components.switch.sm.height'),
'width': theme('custom.components.switch.sm.width'),
'border-radius': theme('custom.components.switch.sm.height'),
'&:before': {
'height': '0.75rem',
'width': '0.75rem',
},
},
'.switch-label': {
'font-size': theme('fontSize.2sm'),
},
},
'.switch-lg': {
'input[type=checkbox]': {
'height': theme('custom.components.switch.lg.height'),
'width': theme('custom.components.switch.lg.width'),
'border-radius': theme('custom.components.switch.lg.height'),
'&:before': {
'height': '1.25rem',
'width': '1.25rem',
},
},
'.switch-label': {
'font-size': theme('fontSize.md'),
},
},
'[dir=rtl] .switch': {
'input[type=checkbox]': {
'&:checked, &[aria-checked="true"]': {
'&:before': {
'transform': 'translate(100%, -50%)',
}
}
}
}
});
addVariant('switch-on', [
({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.switch:has([type="checkbox"]:checked) .${e(`switch-on${separator}${className}`)}`;
});
},
]);
});

233
src/plugins/components/table.js Normal file
View File

@ -0,0 +1,233 @@
import plugin from 'tailwindcss/plugin';
import svgToDataUri from 'mini-svg-data-uri';
export default plugin(({addComponents, theme}) => {
// Base
addComponents({
'.table': {
'width': '100%',
'caption-side': 'bottom',
'border-collapse': 'collapse',
'vertical-align': 'middle',
'text-align': 'left',
'color': 'var(--tw-gray-700)',
'font-weight': theme('fontWeight.medium'),
'font-size': theme('fontSize.sm'),
'line-height': theme('fontSize.sm.1.lineHeight'),
'th, td': {
'input[type="checkbox"]': {
'vertical-align': 'inherit'
}
},
'thead, tfoot': {
'td, th': {
'background-color': 'var(--tw-table-head-background-color)',
'color': 'var(--tw-gray-600)',
'font-weight': theme('fontWeight.medium'),
'font-size': theme('fontSize.2sm'),
'line-height': theme('fontSize.2sm.1.lineHeight'),
'vertical-align': 'middle'
},
},
'thead': {
'td, th': {
'border-bottom': 'var(--tw-table-border)'
},
},
'tfoot': {
'td, th': {
'border-top': 'var(--tw-table-border)'
},
},
'tbody': {
'vertical-align': 'inherit',
'tr': {
'td, th': {
'border-bottom': 'var(--tw-table-border)'
},
'&:last-child': {
'td, th': {
'border-bottom': '0',
},
},
}
}
},
'[dir=rtl] .table': {
'text-align': 'right',
},
});
// Sizes
addComponents({
'.table': {
'thead, tfoot': {
'td, th': {
'padding-inline-start': theme('custom.components.table.px.DEFAULT'),
'padding-inline-end': theme('custom.components.table.px.DEFAULT'),
'padding-top': theme('custom.components.table.py.DEFAULT.head'),
'padding-bottom': theme('custom.components.table.py.DEFAULT.head')
},
},
'tbody': {
'tr': {
'td, th': {
'padding-inline-start': theme('custom.components.table.px.DEFAULT'),
'padding-inline-end': theme('custom.components.table.px.DEFAULT'),
'padding-top': theme('custom.components.table.py.DEFAULT.body'),
'padding-bottom': theme('custom.components.table.py.DEFAULT.body')
}
}
}
},
'.table-xs': {
'thead, tfoot': {
'td, th': {
'padding-inline-start': theme('custom.components.table.px.xs'),
'padding-inline-end': theme('custom.components.table.px.xs'),
'padding-top': theme('custom.components.table.py.xs.head'),
'padding-bottom': theme('custom.components.table.py.xs.head')
},
},
'tbody': {
'tr': {
'td, th': {
'padding-inline-start': theme('custom.components.table.px.xs'),
'padding-inline-end': theme('custom.components.table.px.xs'),
'padding-top': theme('custom.components.table.py.xs.body'),
'padding-bottom': theme('custom.components.table.py.xs.body')
}
}
}
},
'.table-sm': {
'thead, tfoot': {
'td, th': {
'padding-inline-start': theme('custom.components.table.px.sm'),
'padding-inline-end': theme('custom.components.table.px.sm'),
'padding-top': theme('custom.components.table.py.sm.head'),
'padding-bottom': theme('custom.components.table.py.sm.head')
},
},
'tbody': {
'tr': {
'td, th': {
'padding-inline-start': theme('custom.components.table.px.sm'),
'padding-inline-end': theme('custom.components.table.px.sm'),
'padding-top': theme('custom.components.table.py.sm.body'),
'padding-bottom': theme('custom.components.table.py.sm.body')
}
}
}
},
'.table-lg': {
'thead, tfoot': {
'td, th': {
'padding-inline-start': theme('custom.components.table.px.lg'),
'padding-inline-end': theme('custom.components.table.px.lg'),
'padding-top': theme('custom.components.table.py.lg.head'),
'padding-bottom': theme('custom.components.table.py.lg.head')
},
},
'tbody': {
'tr': {
'td, th': {
'padding-inline-start': theme('custom.components.table.px.lg'),
'padding-inline-end': theme('custom.components.table.px.lg'),
'padding-top': theme('custom.components.table.py.lg.body'),
'padding-bottom': theme('custom.components.table.py.lg.body')
}
}
}
}
});
// Border
addComponents({
'.table-border': {
'border': 'var(--tw-table-border)',
'td, th': {
'border-right': 'var(--tw-table-border)',
'&:last-child': {
'border-right': '0'
}
}
},
'.table-border-s': {
'border-inline-start': 'var(--tw-table-border)'
},
'.table-border-e': {
'border-inline-end': 'var(--tw-table-border)'
},
'.table-border-t': {
'border-top': 'var(--tw-table-border)'
},
'.table-border-b': {
'border-bottom': 'var(--tw-table-border)'
}
});
// Sort
addComponents({
'.sort': {
'display': 'inline-flex',
'align-items': 'center',
'gap': '0.35rem',
'cursor': 'pointer',
'line-height': '1'
},
'.sort-icon': {
'display': 'inline-flex',
'flex-direction': 'column',
'justify-content': 'center',
'align-items': 'center',
'height': '0.875rem',
'width': '0.875rem',
'gap': '0.125rem',
'line-height': '1',
'&:before': {
'display': 'inline-block',
'content': '""',
'height': '0.25rem',
'width': '0.438rem',
'background-repeat': 'no-repeat',
'background-position': `center`,
'background-size': 'cover',
'background-image': `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z" fill="${theme('base.colors.gray.light.600')}"/></svg>`)}")`
},
'&:after': {
'display': 'inline-block',
'content': '""',
'height': '0.25rem',
'width': '0.438rem',
'background-repeat': 'no-repeat',
'background-position': `center`,
'background-size': 'cover',
'background-image': `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z" fill="${theme('base.colors.gray.light.600')}"/></svg>`)}")`
},
'.asc > &': {
'&:before': {
'background-image': `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z" fill="${theme('base.colors.gray.light.700')}"/></svg>`)}")`
},
'&:after': {
'background-image': `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z" fill="${theme('base.colors.gray.light.400')}"/></svg>`)}")`
}
},
'.desc > &': {
'&:before': {
'background-image': `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z" fill="${theme('base.colors.gray.light.400')}"/></svg>`)}")`
},
'&:after': {
'background-image': `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z" fill="${theme('base.colors.gray.light.700')}"/></svg>`)}")`
}
}
},
'.sort-label': {
'display': 'inline-flex',
'align-items': 'center',
'gap': '0.35rem'
}
});
});

38
src/plugins/components/tabs.js Normal file
View File

@ -0,0 +1,38 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({addComponents, theme}) => {
// Base
addComponents({
'.tabs': {
'display': 'flex',
'align-items': 'center',
'gap': theme('spacing.5'),
'border-bottom': '1px solid var(--tw-gray-200)'
},
'.tab': {
'display': 'inline-flex',
'align-items': 'center',
'gap': theme('spacing')['2'],
'font-size': theme('fontSize.2sm'),
'line-height': '1',
'color': 'var(--tw-gray-700)',
'i': {
'font-size': theme('fontSize.md'),
'color': 'var(--tw-gray-600)',
},
'font-weight': theme('fontWeight.medium'),
'padding': `${theme('spacing.4')} 0`,
'border-bottom': '2px solid transparent',
'&.active, &:hover, &:focus': {
'color': 'var(--tw-primary)',
'i': {
'color': 'var(--tw-primary)'
}
},
'&.active': {
'border-bottom-color': 'var(--tw-primary)'
}
}
});
});

68
src/plugins/components/textarea.js Normal file
View File

@ -0,0 +1,68 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({addComponents, theme}) => {
// Form input
addComponents({
'.textarea': {
'display': 'block',
'width': '100%',
'appearance': 'none',
'box-shadow': 'none',
'outline': 'none',
'font-weight': theme('custom.components.btn.DEFAULT.fontWeight'),
'font-size': theme('custom.components.btn.DEFAULT.fontSize'),
'line-height': theme('leading.5'),
'background-color': 'var(--tw-light-active)',
'border-radius': theme('custom.components.common.borderRadius.btn'),
'padding': `${theme('custom.components.btn.DEFAULT.py')} ${theme('custom.components.input.DEFAULT.px')}`,
'border': '1px solid var(--tw-gray-300)',
'color': 'var(--tw-gray-700)',
'&::placeholder': {
'color': 'var(--tw-gray-500)'
},
'&:hover': {
'border-color': 'var(--tw-gray-400)'
},
'&:focus': {
'border-color': 'var(--tw-primary)',
'box-shadow': 'var(--tw-form-input-focus-box-shadow)',
'color': 'var(--tw-gray-700)',
'&::placeholder': {
'color': 'var(--tw-gray-600)'
},
},
'&:active': {
'color': 'var(--tw-gray-700)',
'&::placeholder': {
'color': 'var(--tw-gray-600)',
},
'box-shadow': 'none'
},
'&[disabled]': {
'background-color': 'var(--tw-gray-100)',
'color': 'var(--tw-gray-400)',
'&::placeholder': {
'color': 'var(--tw-gray-300)',
}
},
'&[readonly]': {
'background-color': 'var(--tw-gray-100)',
'color': 'var(--tw-gray-400)',
'&::placeholder': {
'color': 'var(--tw-gray-300)',
}
}
},
'.textarea-sm': {
'font-weight': theme('custom.components.btn.sm.fontWeight'),
'font-size': theme('custom.components.btn.sm.fontSize'),
'padding': `${theme('custom.components.btn.sm.py')} ${theme('custom.components.input.sm.px')}`
},
'.textarea-lg': {
'font-weight': theme('custom.components.btn.lg.fontWeight'),
'font-size': theme('custom.components.btn.lg.fontSize'),
'padding': `${theme('custom.components.btn.lg.py')} ${theme('custom.components.input.lg.px')}`
}
});
});

148
src/plugins/components/theme.js Normal file
View File

@ -0,0 +1,148 @@
import plugin from 'tailwindcss/plugin';
const convertToKebabCase = (str) => {
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}
export default plugin(({addBase, theme}) => {
const getGrayColors = (mode) => {
const gray = theme('base.colors.gray')[mode];
const vars = {};
for (const variant of Object.keys(gray)) {
vars[`--tw-gray-${variant}`] = gray[variant];
}
return vars;
}
const getCoalColors = () => {
const coal = theme('colors.coal');
const vars = {};
for (const variant of Object.keys(coal)) {
vars[`--tw-coal-${variant}`] = coal[variant];
}
return vars;
}
const getDefaultGrayColors = (mode) => {
const gray = theme('base.colors.gray')[mode];
const vars = {};
for (const variant of Object.keys(gray)) {
vars[`--tw-gray-${variant}-${mode}`] = gray[variant];
}
return vars;
}
const getContextualColors = (mode) => {
const contextual = theme('base.colors.contextual')[mode];
const vars = {};
for (const variant of Object.keys(contextual)) {
for (const state of Object.keys(contextual[variant])) {
const color = contextual[variant][state];
vars[`--tw-${variant}${state == 'default' ? '' : '-' + state}`] = color;
}
}
return vars;
}
const getDefaultContextualColors = (mode) => {
const contextual = theme('base.colors.contextual')[mode];
const vars = {};
for (const variant of Object.keys(contextual)) {
for (const state of Object.keys(contextual[variant])) {
const color = contextual[variant][state];
vars[`--tw-${variant}${state == 'default' ? '' : '-' + state}-${mode}`] = color;
}
}
return vars;
}
const getComponentBackgroundColors = (mode) => {
const colors = theme('custom.components.common.backgrounds')[mode];
const vars = {};
for (const variant of Object.keys(colors)) {
const prop = convertToKebabCase(variant);
vars[`--tw-${prop}-background-color`] = colors[variant];
}
return vars;
}
const getComponentBorders = (mode) => {
const borders = theme('custom.components.common.borders')[mode];
const vars = {};
for (const variant of Object.keys(borders)) {
vars[`--tw-${variant}-border`] = borders[variant];
}
return vars;
}
const getComponentsBoxShadows = (mode) => {
const boxShadows = theme('custom.components.common.boxShadows')[mode];
const vars = {};
for (const variant of Object.keys(boxShadows)) {
vars[`--tw-${variant}-box-shadow`] = boxShadows[variant];
}
return vars;
}
const getContextualBoxShadows = (mode) => {
const boxShadows = theme('base.boxShadows')[mode];
const vars = {};
for (const variant of Object.keys(boxShadows)) {
vars[`--tw-${variant}-box-shadow`] = boxShadows[variant];
}
return vars;
}
addBase({
':root': {
...getDefaultGrayColors('light'),
...getDefaultGrayColors('dark'),
...getDefaultContextualColors('light'),
...getDefaultContextualColors('dark'),
...getCoalColors()
}
});
addBase({
':root, .light': {
...getGrayColors('light'),
...getContextualColors('light'),
...getContextualBoxShadows('light'),
...getComponentBackgroundColors('light'),
...getComponentBorders('light'),
...getComponentsBoxShadows('light')
}
});
addBase({
'.dark': {
...getGrayColors('dark'),
...getContextualColors('dark'),
...getContextualBoxShadows('dark'),
...getComponentBackgroundColors('dark'),
...getComponentBorders('dark'),
...getComponentsBoxShadows('dark')
}
});
});

24
src/plugins/components/tooltip.js Normal file
View File

@ -0,0 +1,24 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({addComponents, theme}) => {
// Base
addComponents({
'.tooltip': {
'display': 'none',
'color': 'white',
'z-index': theme('custom.components.common.zIndex.tooltip'),
'box-shadow': 'var(--tw-tooltip-box-shadow)',
'background-color': 'var(--tw-tooltip-background-color)',
'border': 'var(--tw-tooltip-border)',
'border-radius': theme('custom.components.common.borderRadius.tooltip'),
'padding': '0.375rem 0.6rem',
'font-size': theme('fontSize.xs'),
'font-weight': theme('fontWeight.normal'),
'line-height': theme('fontSize.xs.1.lineHeight'),
'&.show': {
'display': 'block'
}
}
});
});

33
src/plugins/components/typography.js Normal file
View File

@ -0,0 +1,33 @@
import plugin from 'tailwindcss/plugin';
export default plugin(({addComponents, theme}) => {
addComponents({
'.link': {
'color': 'var(--tw-primary)',
'&:hover': {
'color': 'var(--tw-primary-active)',
}
},
'.form-label': {
'display': 'flex',
'width': '100%',
'color': 'var(--tw-gray-700)',
'font-weight': theme('fontWeight.medium'),
'font-size': theme('fontSize.2sm'),
'line-height': theme('fontSize.2sm.1.lineHeight')
},
'.form-info': {
'color': 'var(--tw-gray-700)',
'font-weight': theme('fontWeight.medium'),
'font-size': theme('fontSize.2sm'),
'line-height': theme('fontSize.2sm.1.lineHeight')
},
'.form-hint': {
'color': 'var(--tw-gray-600)',
'font-weight': theme('fontWeight.medium'),
'font-size': theme('fontSize.xs'),
'line-height': theme('fontSize.xs.1.lineHeight')
}
});
});