005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
92 lines
2.4 KiB
JavaScript
92 lines
2.4 KiB
JavaScript
/** @type {import('tailwindcss/plugin')} */
|
|
import plugin from 'tailwindcss/plugin';
|
|
|
|
import defaultTheme from 'tailwindcss/defaultTheme';
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
darkMode: ['class', '[data-mui-color-scheme="dark"]'],
|
|
content: [
|
|
'./data/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./src/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
animation: {
|
|
appear: 'in-right 200ms',
|
|
},
|
|
border: {
|
|
3: '3px',
|
|
},
|
|
boxShadow: {
|
|
'outline-purple': '0 0 0 4px rgba(192, 132, 252, 0.25)',
|
|
'outline-purple-light': '0 0 0 4px rgba(245, 208, 254, 0.25)',
|
|
'outline-purple-xs': '0 0 0 1px rgba(192, 132, 252, 0.25)',
|
|
'outline-switch': '0 0 1px 3px rgba(168, 85, 247, 0.35)',
|
|
},
|
|
cursor: {
|
|
inherit: 'inherit',
|
|
},
|
|
fontFamily: {
|
|
sans: ['IBM Plex Sans', ...defaultTheme.fontFamily.sans],
|
|
},
|
|
keyframes: {
|
|
'in-right': {
|
|
from: { transform: 'translateX(100%)' },
|
|
to: { transform: 'translateX(0)' },
|
|
},
|
|
},
|
|
lineHeight: {
|
|
5.5: '1.375rem',
|
|
},
|
|
maxWidth: {
|
|
snackbar: '560px',
|
|
},
|
|
minHeight: {
|
|
badge: '22px',
|
|
},
|
|
minWidth: {
|
|
badge: '22px',
|
|
listbox: '200px',
|
|
snackbar: '300px',
|
|
'tabs-list': '400px',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
plugin(({ addVariant }) => {
|
|
[
|
|
'active',
|
|
'checked',
|
|
'completed',
|
|
'disabled',
|
|
'readOnly',
|
|
'error',
|
|
'expanded',
|
|
'focused',
|
|
'required',
|
|
'selected',
|
|
].forEach((state) => {
|
|
addVariant(`ui-${state}`, [`&[class~="Mui-${state}"]`, `&[class~="base--${state}"]`]);
|
|
addVariant(`ui-not-${state}`, [
|
|
`&:not([class~="Mui-${state}"])`,
|
|
`&:not([class~="base--${state}"])`,
|
|
]);
|
|
});
|
|
|
|
// for focus-visible, use the same selector as headlessui
|
|
// https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-tailwindcss/src/index.ts#LL35C11-L35C11
|
|
addVariant(`ui-focus-visible`, [
|
|
`&[class~="Mui-focusVisible"]`,
|
|
`&[class~="base--focusVisible"]`,
|
|
`&:focus-visible`,
|
|
]);
|
|
addVariant(`ui-not-focus-visible`, [
|
|
`&:not([class~="Mui-focusVisible"])`,
|
|
`&:not([class~="base--focusVisible"])`,
|
|
]);
|
|
}),
|
|
],
|
|
};
|