openreplay/frontend/tailwind.config.js
2022-12-19 14:58:06 +01:00

155 lines
3.4 KiB
JavaScript

const colors = require('./app/theme/colors');
const defaultColors = require('tailwindcss/colors')
console.log(defaultColors);
module.exports = {
// important: true,
content: [
'./app/**/*.tsx',
'./app/**/*.js',
],
// corePlugins: [
// 'preflight',
// 'container',
// // 'accessibility',
// // 'alignContent',
// 'alignItems',
// 'alignSelf',
// //'appearance',
// // 'backgroundAttachment',
// 'backgroundColor',
// 'backgroundOpacity',
// // 'backgroundPosition',
// // 'backgroundRepeat',
// // 'backgroundSize',
// // 'borderCollapse',
// 'borderColor',
// 'borderOpacity',
// 'borderRadius',
// // 'borderStyle',
// 'borderWidth',
// // 'boxSizing',
// // 'boxShadow',
// // 'clear',
// 'cursor',
// 'display',
// // 'divideColor',
// // 'divideWidth',
// // 'fill',
// 'flex',
// 'flexDirection',
// // 'flexGrow',
// 'flexShrink',
// 'flexWrap',
// // 'float',
// 'gap',
// 'gridAutoFlow',
// 'gridColumn',
// 'gridColumnStart',
// 'gridColumnEnd',
// 'gridRow',
// 'gridRowStart',
// 'gridRowEnd',
// 'gridTemplateColumns',
// 'gridTemplateRows',
// 'fontFamily',
// 'fontSize',
// //'fontSmoothing',
// 'fontStyle',
// 'fontWeight',
// 'height',
// 'inset',
// 'justifyContent',
// 'justifySelf',
// 'letterSpacing',
// 'lineHeight',
// // 'listStylePosition',
// // 'listStyleType',
// 'margin',
// // 'maxHeight',
// // 'maxWidth',
// // 'minHeight',
// // 'minWidth',
// // 'objectFit',
// // 'objectPosition',
// 'opacity',
// // 'order',
// 'outline',
// 'overflow',
// 'padding',
// // 'placeholderColor',
// // 'placeholderOpacity',
// 'pointerEvents',
// 'position',
// // 'resize',
// // 'rotate',
// // 'scale',
// // 'skew',
// // 'space',
// // 'stroke',
// // 'strokeWidth',
// // 'tableLayout',
// 'textAlign',
// // 'textColor',
// // 'textOpacity',
// 'textDecoration',
// 'textTransform',
// // 'transform',
// // 'transitionDuration',
// // 'transitionProperty',
// // 'transitionTimingFunction',
// // 'translate',
// 'userSelect',
// // 'verticalAlign',
// 'visibility',
// 'whitespace',
// 'width',
// 'wordBreak',
// 'zIndex'
// ],
theme: {
colors: {
...defaultColors,
...colors,
},
// borderColor: {
// default: '#DDDDDD',
// "gray-light-shade": colors["gray-light-shade"],
// "blue": colors["active-blue-border"],
// },
extend: {
boxShadow: {
'border-blue': `0 0 0 1px ${colors['active-blue-border']}`,
'border-main': `0 0 0 1px ${colors['main']}`,
'border-gray': '0 0 0 1px #999',
},
keyframes: {
'fade-in': {
'0%': {
opacity: '0',
// transform: 'translateY(-10px)'
},
'100%': {
opacity: '1',
// transform: 'translateY(0)'
},
}
},
animation: {
'fade-in': 'fade-in 0.2s ease-out'
},
colors: {
'disabled-text': 'rgba(0,0,0, 0.38)',
},
boxShadow: {
'border-blue': `0 0 0 1px ${colors['active-blue-border']}`,
'border-main': `0 0 0 1px ${colors['main']}`,
'border-gray': '0 0 0 1px #999',
}
},
},
variants: {
visibility: ['responsive', 'hover', 'focus', 'group-hover']
},
plugins: [],
}