const { slateDark } = require('@radix-ui/colors');
import { colors } from './theme/colors';
const defaultTheme = require('tailwindcss/defaultTheme');
const {
iconsPlugin,
getIconCollections,
} = require('@egoist/tailwindcss-icons');
const defaultSansFonts = [
'-apple-system',
'system-ui',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Tahoma',
'Arial',
'sans-serif !important',
];
const tailwindConfig = {
darkMode: 'class',
content: [
'./enterprise/app/views/**/*.html.erb',
'./app/javascript/widget/**/*.vue',
'./app/javascript/v3/**/*.vue',
'./app/javascript/dashboard/**/*.vue',
'./app/javascript/portal/**/*.vue',
'./app/javascript/shared/**/*.vue',
'./app/javascript/survey/**/*.vue',
'./app/javascript/dashboard/helper/**/*.js',
'./app/views/**/*.html.erb',
],
theme: {
extend: {
fontFamily: {
sans: defaultSansFonts,
inter: ['Inter', ...defaultSansFonts],
interDisplay: ['Inter Display', ...defaultSansFonts],
},
},
screens: {
xs: '480px',
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
fontSize: {
...defaultTheme.fontSize,
xxs: '0.625rem',
},
colors: {
transparent: 'transparent',
white: '#fff',
'modal-backdrop-light': 'rgba(0, 0, 0, 0.4)',
'modal-backdrop-dark': 'rgba(0, 0, 0, 0.6)',
current: 'currentColor',
...colors,
body: slateDark.slate7,
},
keyframes: {
...defaultTheme.keyframes,
wiggle: {
'0%': { transform: 'translateX(0)' },
'15%': { transform: 'translateX(0.375rem)' },
'30%': { transform: 'translateX(-0.375rem)' },
'45%': { transform: 'translateX(0.375rem)' },
'60%': { transform: 'translateX(-0.375rem)' },
'75%': { transform: 'translateX(0.375rem)' },
'90%': { transform: 'translateX(-0.375rem)' },
'100%': { transform: 'translateX(0)' },
},
'fade-in-up': {
'0%': { opacity: 0, transform: 'translateY(0.5rem)' },
'100%': { opacity: 1, transform: 'translateY(0)' },
},
'loader-pulse': {
'0%': { opacity: 0.4 },
'50%': { opacity: 1 },
'100%': { opacity: 0.4 },
},
'card-select': {
'0%, 100%': {
transform: 'translateX(0)',
},
'50%': {
transform: 'translateX(1px)',
},
},
shake: {
'0%, 100%': { transform: 'translateX(0)' },
'25%': { transform: 'translateX(0.234375rem)' },
'50%': { transform: 'translateX(-0.234375rem)' },
'75%': { transform: 'translateX(0.234375rem)' },
},
},
animation: {
...defaultTheme.animation,
wiggle: 'wiggle 0.5s ease-in-out',
'fade-in-up': 'fade-in-up 0.3s ease-out',
'loader-pulse': 'loader-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'card-select': 'card-select 0.25s ease-in-out',
shake: 'shake 0.3s ease-in-out 0s 2',
},
},
plugins: [
// eslint-disable-next-line
require('@tailwindcss/typography'),
iconsPlugin({
collections: {
woot: {
icons: {
alert: {
body: ``,
width: 2,
height: 12,
},
captain: {
body: `
`,
width: 556,
height: 556,
},
},
},
...getIconCollections(['lucide', 'logos', 'ri']),
},
}),
],
};
module.exports = tailwindConfig;