Files
website-typo3/tailwind.config.js
T

167 lines
6.4 KiB
JavaScript

const plugin = require('tailwindcss/plugin')
const tinycolor = require('tinycolor2')
module.exports = {
purge: {
content: [
'./public/typo3conf/ext/ep_theme/Configuration/TypoScript/**/*.typoscript',
'./public/typo3conf/ext/ep_theme/Resources/Private/Layouts/**/*.html',
'./public/typo3conf/ext/ep_theme/Resources/Private/Partials/**/*.html',
'./public/typo3conf/ext/ep_theme/Resources/Private/Templates/**/*.html',
'./public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/**/*.{js,vue}',
'./public/typo3conf/ext/ep_theme/Classes/ViewHelpers/**/*.php',
],
safelist: [
'bg-header-season-w',
'bg-header-season-s',
'bg-concept-bdg',
'bg-concept-skr',
'bg-concept-evt',
'bg-concept-fam',
'bg-concept-grp',
'bg-concept-prg',
'bg-concept-ind',
'bg-concept-wkd',
'bg-concept-spz',
'bg-concept-epe',
'bg-concept-sfl',
/^flatpickr-.*/,
],
},
theme: {
container: {
center: true,
padding: '1rem',
},
fontFamily: {
'sans': [ 'Lato', 'sans-serif' ],
},
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
},
extend: {
fontSize: {
'xs': '.8rem',
},
colors: {
overlay: {
black: tinycolor('#000000').setAlpha(0.85).toRgbString(),
white: tinycolor('#ffffff').setAlpha(0.85).toRgbString(),
},
concept: {
default: '#3d8ccb',
bdg: '#3d8ccb',
skr: '#3d8ccb',
evt: '#ed5454',
fam: '#7ca7d5',
grp: '#ffa300',
prg: '#3d8ccb',
ind: '#009fe3',
wkd: '#44d04e',
spz: '#436a8a',
epe: '#436a8a',
sfl: '#999',
},
ep: {
primary: '#3d8ccb',
secondary: '#f9c700',
'primary-bg': '#ebf3fa',
'primary-light': '#009fff',
'primary-medium': '#165883',
'primary-dark': '#18527B',
'primary-10': tinycolor('#3d8ccb').setAlpha(0.1).toRgbString(),
'primary-50': tinycolor('#3d8ccb').setAlpha(0.5).toRgbString(),
'primary-80': tinycolor('#3d8ccb').setAlpha(0.8).toRgbString(),
'secondary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
'secondary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
},
sbw: {
primary: '#f0bc44',
secondary: '#ee525a',
'primary-dark': '#c7a20c',
'primary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
'primary-50': tinycolor('#f0bc44').setAlpha(0.5).toRgbString(),
'primary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
'overlay-secondary': tinycolor('#c20000').setAlpha(0.55).toRgbString(),
},
snz: {
primary: '#82C3C6',
secondary: '#f9c33d',
'primary-10': tinycolor('#82C3C6').setAlpha(0.1).toRgbString(),
'primary-50': tinycolor('#82C3C6').setAlpha(0.5).toRgbString(),
'primary-80': tinycolor('#82C3C6').setAlpha(0.8).toRgbString(),
},
uch: {
primary: '#b5e400',
secondary: '#19a3dc',
'primary-dark': '#b5e400',
'primary-10': tinycolor('#b5e400').setAlpha(0.1).toRgbString(),
'primary-50': tinycolor('#b5e400').setAlpha(0.5).toRgbString(),
'primary-80': tinycolor('#b5e400').setAlpha(0.8).toRgbString(),
'overlay-secondary': tinycolor('#b5e400').setAlpha(0.55).toRgbString(),
},
},
height: {
'128': '32rem',
},
inset: {
'100': '100%',
'1/2': '50%',
},
zIndex: {
'-10': '-10',
'100': 100,
},
},
},
variants: {
extend: {
backgroundColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover', 'even', 'odd' ],
borderWidth: [ 'even', 'odd', 'first', 'last' ],
textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover' ],
borderColor: [ 'sbw','snz', 'uch' ],
display: ['group-hover', 'reduced'],
visibility: [ 'group-hover' ],
opacity: [ 'group-hover' ],
rotate: [ 'group-hover' ],
flex: [ 'reduced' ],
flexDirection: [ 'even', 'odd', 'reduced' ],
alignItems: [ 'reduced' ],
padding: [ 'even', 'odd', 'first', 'last', 'reduced' ],
margin: [ 'even', 'odd', 'first', 'last', 'reduced' ],
maxWidth: [ 'reduced' ],
},
},
plugins: [
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/forms'),
require('tailwindcss-alt')({
variants: ['sbw', 'snz', 'uch'],
}),
plugin(function ({addVariant, e}) {
addVariant('first-type', ({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.${e(`first-type${separator}${className}`)}:first-of-type`
})
})
}),
plugin(function ({addVariant, e}) {
addVariant('last-type', ({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.${e(`last-type${separator}${className}`)}:last-of-type`
})
})
}),
plugin(function ({addVariant, e}) {
addVariant('reduced', ({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.reduced .${e(`reduced${separator}${className}`)}`
})
})
}),
],
}