Files
website-typo3/tailwind.config.js
T

178 lines
6.8 KiB
JavaScript

const postcss = require('postcss')
const plugin = require('tailwindcss/plugin')
module.exports = {
content: [
'./public/typo3conf/ext/ep_theme/Configuration/RTE/*.yaml',
'./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: [
'pt-8', 'pt-16', 'pb-8', 'pb-16',
'bg-red-600',
'bg-header-season-w',
'bg-header-season-s',
'bg-concept-bdg', 'bg-concept-bdg/70',
'bg-concept-skr', 'bg-concept-skr/70',
'bg-concept-evt', 'bg-concept-evt/70',
'bg-concept-fam', 'bg-concept-fam/70',
'bg-concept-grp', 'bg-concept-grp/70',
'bg-concept-prg', 'bg-concept-prg/70',
'bg-concept-ind', 'bg-concept-ind/70',
'bg-concept-wkd', 'bg-concept-wkd/70',
'bg-concept-kt', 'bg-concept-kt/70',
'bg-concept-spz', 'bg-concept-spz/70',
'bg-concept-epe', 'bg-concept-epe/70',
'bg-concept-sfl', 'bg-concept-sfl/70',
'flatpickr-input', 'flatpickr-calendar', 'flatpickr-day', 'flatpickr-day.selected',
'availability-full-to-none', 'availability-full-to-partial', 'availability-none-to-full',
'availability-partial-to-full', 'availability-none-to-partial', 'availability-partial-to-none',
],
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: {
concept: {
default: '#0173A5',
bdg: '#0173A5',
skr: '#0173A5',
evt: '#BA034F',
fam: '#7ca7d5',
grp: '#576D02',
prg: '#0173A5',
ind: '#1684DD',
wkd: '#96BB05',
kt: '#576D02',
spz: '#436a8a',
epe: '#436a8a',
sfl: '#4E4E51',
},
ep: {
primary: '#3d8ccb',
secondary: '#f9c700',
'primary-bg': '#ebf3fa',
'primary-light': '#009fff',
'primary-medium': '#165883',
'primary-dark': '#18527b',
pink: '#fa1a8c',
},
sbw: {
primary: '#f0bc44',
secondary: '#ee525a',
'primary-dark': '#c7a20c',
'overlay': '#c20000',
},
snz: {
primary: '#82c3c6',
secondary: '#f9c33d',
'primary-dark': '#82c3c6',
},
uch: {
primary: '#a6c62c',
secondary: '#19a3dc',
'primary-dark': '#a6c62c',
'overlay': '#a6c62c',
},
ser: {
primary: '#006fb6',
secondary: '#e85243',
'primary-light': '#04A4CC',
},
},
opacity: {
'55': 0.5,
'85': 0.85,
},
backgroundImage: {
'badge-gradient': 'linear-gradient(120deg, rgba(150,1,103,1) 0%, rgba(158,3,106,1) 40%, rgba(250,26,140,1) 100%)',
'brand-gradient': 'linear-gradient(to top right, #009fff, #165883, #18527b)',
},
height: {
'128': '32rem',
},
inset: {
'100': '100%',
'1/2': '50%',
},
zIndex: {
'-10': '-10',
'100': 100,
},
},
},
variants: {
extend: {
backgroundColor: [ 'sbw', 'sbw-hover', 'sbw-group-hover', 'snz', 'snz-hover', 'snz-group-hover', 'uch', 'uch-hover', 'uch-group-hover', 'ser', 'ser-hover', 'ser-group-hover' ],
backgroundImage: [ 'ser' ],
textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover', 'ser', 'ser-hover' ],
borderColor: [ 'sbw','snz', 'uch', 'ser' ],
display: [ 'reduced' ],
flex: [ 'reduced' ],
flexDirection: [ 'reduced' ],
alignItems: [ 'reduced' ],
padding: [ 'reduced' ],
margin: [ 'reduced' ],
maxWidth: [ 'reduced' ],
},
},
plugins: [
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/forms'),
require('tailwindcss-alt')({
variants: ['sbw', 'snz', 'uch', 'ser'],
}),
plugin(function ({addVariant, e}) {
addVariant('hover-hover', ({ container, separator }) => {
const hoverHover = postcss.atRule({ name: 'media', params: '(hover: hover)' })
hoverHover.append(container.nodes)
container.append(hoverHover)
hoverHover.walkRules(rule => {
rule.selector = `.${e(`hover-hover${separator}${rule.selector.slice(1)}`)}`
})
})
addVariant('hover-none', ({ container, separator }) => {
const hoverNone = postcss.atRule({ name: 'media', params: '(hover: none)' })
hoverNone.append(container.nodes)
container.append(hoverNone)
hoverNone.walkRules(rule => {
rule.selector = `.${e(`hover-none${separator}${rule.selector.slice(1)}`)}`
})
})
addVariant('first-type', ({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.${e(`first-type${separator}${className}`)}:first-of-type`
})
})
addVariant('last-type', ({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.${e(`last-type${separator}${className}`)}:last-of-type`
})
})
addVariant('reduced', ({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.reduced .${e(`reduced${separator}${className}`)}`
})
})
}),
],
}