91 lines
3.2 KiB
JavaScript
91 lines
3.2 KiB
JavaScript
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'),
|
|
},
|
|
});
|
|
});
|