|
|
|
|
const path = require('path');
|
|
|
|
|
const process = require('process');
|
|
|
|
|
const colors = require('tailwindcss/colors');
|
|
|
|
|
const defaultTheme = require('tailwindcss/defaultTheme');
|
|
|
|
|
const generatePalette = require(path.resolve(__dirname, ('src/@teso/tailwind/utils/generate-palette')));
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Custom palettes
|
|
|
|
|
*
|
|
|
|
|
* Uses the generatePalette helper method to generate
|
|
|
|
|
* Tailwind-like color palettes automatically
|
|
|
|
|
*/
|
|
|
|
|
const customPalettes = {
|
|
|
|
|
brand: generatePalette('#2196F3')
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Themes
|
|
|
|
|
*/
|
|
|
|
|
const themes = {
|
|
|
|
|
// Default theme is required for theming system to work correctly
|
|
|
|
|
'default': {
|
|
|
|
|
primary: {
|
|
|
|
|
...colors.indigo,
|
|
|
|
|
DEFAULT: colors.indigo[600]
|
|
|
|
|
},
|
|
|
|
|
accent: {
|
|
|
|
|
...colors.blueGray,
|
|
|
|
|
DEFAULT: colors.blueGray[800]
|
|
|
|
|
},
|
|
|
|
|
warn: {
|
|
|
|
|
...colors.red,
|
|
|
|
|
DEFAULT: colors.red[600]
|
|
|
|
|
},
|
|
|
|
|
'on-warn': {
|
|
|
|
|
500: colors.red['50']
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// Rest of the themes will use the 'default' as the base theme
|
|
|
|
|
// and extend them with their given configuration
|
|
|
|
|
'brand': {
|
|
|
|
|
primary: customPalettes.brand
|
|
|
|
|
},
|
|
|
|
|
'indigo': {
|
|
|
|
|
primary: {
|
|
|
|
|
...colors.teal,
|
|
|
|
|
DEFAULT: colors.teal[600]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'rose': {
|
|
|
|
|
primary: colors.rose
|
|
|
|
|
},
|
|
|
|
|
'purple': {
|
|
|
|
|
primary: {
|
|
|
|
|
...colors.purple,
|
|
|
|
|
DEFAULT: colors.purple[600]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'amber': {
|
|
|
|
|
primary: colors.amber
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Tailwind configuration
|
|
|
|
|
*/
|
|
|
|
|
const config = {
|
|
|
|
|
experimental: {},
|
|
|
|
|
future: {},
|
|
|
|
|
darkMode: 'class',
|
|
|
|
|
important: true,
|
|
|
|
|
purge: {
|
|
|
|
|
enabled: process.env.TAILWIND_MODE === 'build',
|
|
|
|
|
content: ['./src/**/*.{html,scss,ts}'],
|
|
|
|
|
options: {
|
|
|
|
|
safelist: {
|
|
|
|
|
standard: ['dark'],
|
|
|
|
|
deep: [/^theme/, /^mat/]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
theme: {
|
|
|
|
|
colors: {
|
|
|
|
|
transparent: 'transparent',
|
|
|
|
|
current: 'currentColor',
|
|
|
|
|
black: colors.black,
|
|
|
|
|
white: colors.white,
|
|
|
|
|
pink: colors.pink,
|
|
|
|
|
gray: colors.blueGray,
|
|
|
|
|
red: colors.red,
|
|
|
|
|
orange: colors.orange,
|
|
|
|
|
amber: colors.amber,
|
|
|
|
|
yellow: colors.yellow,
|
|
|
|
|
green: colors.green,
|
|
|
|
|
teal: colors.teal,
|
|
|
|
|
blue: colors.blue,
|
|
|
|
|
indigo: colors.indigo,
|
|
|
|
|
purple: colors.purple
|
|
|
|
|
},
|
|
|
|
|
fontSize: {
|
|
|
|
|
'xs': '0.625rem',
|
|
|
|
|
'sm': '0.75rem',
|
|
|
|
|
'md': '0.8125rem',
|
|
|
|
|
'base': '0.875rem',
|
|
|
|
|
'lg': '1rem',
|
|
|
|
|
'xl': '1.125rem',
|
|
|
|
|
'2xl': '1.25rem',
|
|
|
|
|
'3xl': '1.5rem',
|
|
|
|
|
'4xl': '2rem',
|
|
|
|
|
'5xl': '2.25rem',
|
|
|
|
|
'6xl': '2.5rem',
|
|
|
|
|
'7xl': '3rem',
|
|
|
|
|
'8xl': '4rem',
|
|
|
|
|
'9xl': '6rem',
|
|
|
|
|
'10xl': '8rem'
|
|
|
|
|
},
|
|
|
|
|
screens: {
|
|
|
|
|
print: { 'raw': 'print' },
|
|
|
|
|
sm: '600px',
|
|
|
|
|
md: '960px',
|
|
|
|
|
lg: '1280px',
|
|
|
|
|
xl: '1440px'
|
|
|
|
|
},
|
|
|
|
|
extend: {
|
|
|
|
|
animation: {
|
|
|
|
|
'spin-slow': 'spin 3s linear infinite'
|
|
|
|
|
},
|
|
|
|
|
flex: {
|
|
|
|
|
'0': '0 0 auto'
|
|
|
|
|
},
|
|
|
|
|
fontFamily: {
|
|
|
|
|
sans: `"Inter var", ${defaultTheme.fontFamily.sans.join(',')}`,
|
|
|
|
|
mono: `"IBM Plex Mono", ${defaultTheme.fontFamily.mono.join(',')}`
|
|
|
|
|
},
|
|
|
|
|
opacity: {
|
|
|
|
|
12: '0.12',
|
|
|
|
|
38: '0.38',
|
|
|
|
|
87: '0.87'
|
|
|
|
|
},
|
|
|
|
|
rotate: {
|
|
|
|
|
'-270': '270deg',
|
|
|
|
|
'15': '15deg',
|
|
|
|
|
'30': '30deg',
|
|
|
|
|
'60': '60deg',
|
|
|
|
|
'270': '270deg'
|
|
|
|
|
},
|
|
|
|
|
scale: {
|
|
|
|
|
'-1': '-1'
|
|
|
|
|
},
|
|
|
|
|
zIndex: {
|
|
|
|
|
'-1': -1,
|
|
|
|
|
'49': 49,
|
|
|
|
|
'60': 60,
|
|
|
|
|
'70': 70,
|
|
|
|
|
'80': 80,
|
|
|
|
|
'90': 90,
|
|
|
|
|
'99': 99,
|
|
|
|
|
'999': 999,
|
|
|
|
|
'9999': 9999,
|
|
|
|
|
'99999': 99999
|
|
|
|
|
},
|
|
|
|
|
spacing: {
|
|
|
|
|
'13': '3.25rem',
|
|
|
|
|
'15': '3.75rem',
|
|
|
|
|
'18': '4.5rem',
|
|
|
|
|
'22': '5.5rem',
|
|
|
|
|
'26': '6.5rem',
|
|
|
|
|
'30': '7.5rem',
|
|
|
|
|
'50': '12.5rem',
|
|
|
|
|
'90': '22.5rem'
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* Extended spacing values for width and height utilities.
|
|
|
|
|
* This way, we won't be adding these to other utilities
|
|
|
|
|
* that use 'spacing' config to keep the file size
|
|
|
|
|
* smaller by not generating useless utilities such as
|
|
|
|
|
* p-1/4 or m-480.
|
|
|
|
|
*/
|
|
|
|
|
extendedSpacing: {
|
|
|
|
|
// Fractional values
|
|
|
|
|
'1/2': '50%',
|
|
|
|
|
'1/3': '33.333333%',
|
|
|
|
|
'2/3': '66.666667%',
|
|
|
|
|
'1/4': '25%',
|
|
|
|
|
'2/4': '50%',
|
|
|
|
|
'3/4': '75%',
|
|
|
|
|
|
|
|
|
|
// Bigger values
|
|
|
|
|
'100': '25rem',
|
|
|
|
|
'120': '30rem',
|
|
|
|
|
'128': '32rem',
|
|
|
|
|
'140': '35rem',
|
|
|
|
|
'160': '40rem',
|
|
|
|
|
'180': '45rem',
|
|
|
|
|
'192': '48rem',
|
|
|
|
|
'200': '50rem',
|
|
|
|
|
'240': '60rem',
|
|
|
|
|
'256': '64rem',
|
|
|
|
|
'280': '70rem',
|
|
|
|
|
'320': '80rem',
|
|
|
|
|
'360': '90rem',
|
|
|
|
|
'400': '100rem',
|
|
|
|
|
'480': '120rem'
|
|
|
|
|
},
|
|
|
|
|
height: theme => ({
|
|
|
|
|
...theme('extendedSpacing')
|
|
|
|
|
}),
|
|
|
|
|
minHeight: theme => ({
|
|
|
|
|
...theme('spacing'),
|
|
|
|
|
...theme('extendedSpacing')
|
|
|
|
|
}),
|
|
|
|
|
maxHeight: theme => ({
|
|
|
|
|
...theme('extendedSpacing'),
|
|
|
|
|
none: 'none'
|
|
|
|
|
}),
|
|
|
|
|
width: theme => ({
|
|
|
|
|
...theme('extendedSpacing')
|
|
|
|
|
}),
|
|
|
|
|
minWidth: theme => ({
|
|
|
|
|
...theme('spacing'),
|
|
|
|
|
...theme('extendedSpacing'),
|
|
|
|
|
screen: '100vw'
|
|
|
|
|
}),
|
|
|
|
|
maxWidth: theme => ({
|
|
|
|
|
...theme('spacing'),
|
|
|
|
|
...theme('extendedSpacing'),
|
|
|
|
|
screen: '100vw'
|
|
|
|
|
}),
|
|
|
|
|
transitionDuration: {
|
|
|
|
|
'400': '400ms'
|
|
|
|
|
},
|
|
|
|
|
transitionTimingFunction: {
|
|
|
|
|
'drawer': 'cubic-bezier(0.25, 0.8, 0.25, 1)'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// @tailwindcss/typography
|
|
|
|
|
typography: (theme) => ({
|
|
|
|
|
DEFAULT: {
|
|
|
|
|
css: {
|
|
|
|
|
color: 'var(--teso-text-default)',
|
|
|
|
|
'[class~="lead"]': {
|
|
|
|
|
color: 'var(--teso-text-secondary)'
|
|
|
|
|
},
|
|
|
|
|
a: {
|
|
|
|
|
color: 'var(--teso-primary-500)'
|
|
|
|
|
},
|
|
|
|
|
strong: {
|
|
|
|
|
color: 'var(--teso-text-default)'
|
|
|
|
|
},
|
|
|
|
|
'ol > li::before': {
|
|
|
|
|
color: 'var(--teso-text-secondary)'
|
|
|
|
|
},
|
|
|
|
|
'ul > li::before': {
|
|
|
|
|
backgroundColor: 'var(--teso-text-hint)'
|
|
|
|
|
},
|
|
|
|
|
hr: {
|
|
|
|
|
borderColor: 'var(--teso-border)'
|
|
|
|
|
},
|
|
|
|
|
blockquote: {
|
|
|
|
|
color: 'var(--teso-text-default)',
|
|
|
|
|
borderLeftColor: 'var(--teso-border)'
|
|
|
|
|
},
|
|
|
|
|
h1: {
|
|
|
|
|
color: 'var(--teso-text-default)'
|
|
|
|
|
},
|
|
|
|
|
h2: {
|
|
|
|
|
color: 'var(--teso-text-default)'
|
|
|
|
|
},
|
|
|
|
|
h3: {
|
|
|
|
|
color: 'var(--teso-text-default)'
|
|
|
|
|
},
|
|
|
|
|
h4: {
|
|
|
|
|
color: 'var(--teso-text-default)'
|
|
|
|
|
},
|
|
|
|
|
'figure figcaption': {
|
|
|
|
|
color: 'var(--teso-text-secondary)'
|
|
|
|
|
},
|
|
|
|
|
code: {
|
|
|
|
|
color: 'var(--teso-text-default)',
|
|
|
|
|
fontWeight: '500'
|
|
|
|
|
},
|
|
|
|
|
'a code': {
|
|
|
|
|
color: 'var(--teso-primary)'
|
|
|
|
|
},
|
|
|
|
|
pre: {
|
|
|
|
|
color: theme('colors.white'),
|
|
|
|
|
backgroundColor: theme('colors.gray.800')
|
|
|
|
|
},
|
|
|
|
|
thead: {
|
|
|
|
|
color: 'var(--teso-text-default)',
|
|
|
|
|
borderBottomColor: 'var(--teso-border)'
|
|
|
|
|
},
|
|
|
|
|
'tbody tr': {
|
|
|
|
|
borderBottomColor: 'var(--teso-border)'
|
|
|
|
|
},
|
|
|
|
|
'ol[type="A" s]': false,
|
|
|
|
|
'ol[type="a" s]': false,
|
|
|
|
|
'ol[type="I" s]': false,
|
|
|
|
|
'ol[type="i" s]': false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
sm: {
|
|
|
|
|
css: {
|
|
|
|
|
code: {
|
|
|
|
|
fontSize: '1em'
|
|
|
|
|
},
|
|
|
|
|
pre: {
|
|
|
|
|
fontSize: '1em'
|
|
|
|
|
},
|
|
|
|
|
table: {
|
|
|
|
|
fontSize: '1em'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
variants: {
|
|
|
|
|
accessibility: [],
|
|
|
|
|
alignContent: ['responsive'],
|
|
|
|
|
alignItems: ['responsive'],
|
|
|
|
|
alignSelf: ['responsive'],
|
|
|
|
|
animation: [],
|
|
|
|
|
backgroundAttachment: [],
|
|
|
|
|
backgroundClip: [],
|
|
|
|
|
backgroundColor: ['dark', 'responsive', 'group-hover', 'hover', 'focus', 'focus-within'],
|
|
|
|
|
backgroundImage: [],
|
|
|
|
|
backgroundOpacity: ['dark', 'hover'],
|
|
|
|
|
backgroundPosition: [],
|
|
|
|
|
backgroundRepeat: [],
|
|
|
|
|
backgroundSize: [],
|
|
|
|
|
borderCollapse: [],
|
|
|
|
|
borderColor: ['dark', 'group-hover', 'hover', 'focus', 'focus-within'],
|
|
|
|
|
borderOpacity: ['group-hover', 'hover'],
|
|
|
|
|
borderRadius: ['responsive'],
|
|
|
|
|
borderStyle: [],
|
|
|
|
|
borderWidth: ['dark', 'responsive', 'first', 'last', 'odd', 'even'],
|
|
|
|
|
boxShadow: ['dark', 'responsive', 'hover', 'focus-within'],
|
|
|
|
|
boxSizing: [],
|
|
|
|
|
cursor: [],
|
|
|
|
|
display: ['dark', 'responsive', 'hover', 'group-hover'],
|
|
|
|
|
divideColor: ['dark'],
|
|
|
|
|
divideOpacity: [],
|
|
|
|
|
divideStyle: [],
|
|
|
|
|
divideWidth: ['responsive'],
|
|
|
|
|
fill: [],
|
|
|
|
|
flex: ['responsive'],
|
|
|
|
|
flexDirection: ['responsive'],
|
|
|
|
|
flexGrow: ['responsive'],
|
|
|
|
|
flexShrink: ['responsive'],
|
|
|
|
|
flexWrap: ['responsive'],
|
|
|
|
|
fontFamily: [],
|
|
|
|
|
fontSize: ['responsive'],
|
|
|
|
|
fontSmoothing: [],
|
|
|
|
|
fontStyle: ['responsive'],
|
|
|
|
|
fontVariantNumeric: [],
|
|
|
|
|
fontWeight: ['responsive'],
|
|
|
|
|
gap: ['responsive'],
|
|
|
|
|
gridAutoColumns: ['responsive'],
|
|
|
|
|
gridAutoFlow: ['responsive'],
|
|
|
|
|
gridAutoRows: ['responsive'],
|
|
|
|
|
gridColumn: ['responsive'],
|
|
|
|
|
gridColumnEnd: ['responsive'],
|
|
|
|
|
gridColumnStart: ['responsive'],
|
|
|
|
|
gridRow: ['responsive'],
|
|
|
|
|
gridRowEnd: ['responsive'],
|
|
|
|
|
gridRowStart: ['responsive'],
|
|
|
|
|
gridTemplateColumns: ['responsive'],
|
|
|
|
|
gridTemplateRows: ['responsive'],
|
|
|
|
|
height: ['responsive'],
|
|
|
|
|
inset: ['responsive'],
|
|
|
|
|
justifyContent: ['responsive'],
|
|
|
|
|
justifyItems: ['responsive'],
|
|
|
|
|
justifySelf: ['responsive'],
|
|
|
|
|
letterSpacing: ['responsive'],
|
|
|
|
|
lineHeight: ['responsive'],
|
|
|
|
|
listStylePosition: [],
|
|
|
|
|
listStyleType: [],
|
|
|
|
|
margin: ['responsive'],
|
|
|
|
|
maxHeight: ['responsive'],
|
|
|
|
|
maxWidth: ['responsive'],
|
|
|
|
|
minHeight: ['responsive'],
|
|
|
|
|
minWidth: ['responsive'],
|
|
|
|
|
objectFit: ['responsive'],
|
|
|
|
|
objectPosition: ['responsive'],
|
|
|
|
|
opacity: ['responsive', 'group-hover', 'hover'],
|
|
|
|
|
order: ['responsive'],
|
|
|
|
|
outline: [],
|
|
|
|
|
overflow: ['responsive'],
|
|
|
|
|
overscrollBehavior: ['responsive'],
|
|
|
|
|
padding: ['responsive'],
|
|
|
|
|
placeContent: ['responsive'],
|
|
|
|
|
placeItems: ['responsive'],
|
|
|
|
|
placeSelf: ['responsive'],
|
|
|
|
|
pointerEvents: ['responsive'],
|
|
|
|
|
position: ['responsive'],
|
|
|
|
|
resize: [],
|
|
|
|
|
ringColor: ['dark', 'group-hover'],
|
|
|
|
|
ringOffsetColor: ['dark'],
|
|
|
|
|
ringOffsetWidth: [],
|
|
|
|
|
ringOpacity: [],
|
|
|
|
|
ringWidth: [],
|
|
|
|
|
rotate: [],
|
|
|
|
|
scale: [],
|
|
|
|
|
skew: [],
|
|
|
|
|
space: ['responsive'],
|
|
|
|
|
stroke: ['responsive'],
|
|
|
|
|
strokeWidth: ['responsive'],
|
|
|
|
|
tableLayout: ['responsive'],
|
|
|
|
|
textAlign: ['responsive'],
|
|
|
|
|
textColor: ['dark', 'group-hover', 'hover'],
|
|
|
|
|
textDecoration: ['group-hover', 'hover'],
|
|
|
|
|
textOpacity: ['group-hover', 'hover'],
|
|
|
|
|
textOverflow: ['responsive'],
|
|
|
|
|
textTransform: [],
|
|
|
|
|
transform: [],
|
|
|
|
|
transformOrigin: [],
|
|
|
|
|
transitionDelay: [],
|
|
|
|
|
transitionDuration: [],
|
|
|
|
|
transitionProperty: [],
|
|
|
|
|
transitionTimingFunction: [],
|
|
|
|
|
translate: ['responsive', 'hover'],
|
|
|
|
|
userSelect: ['responsive'],
|
|
|
|
|
visibility: ['responsive'],
|
|
|
|
|
whitespace: ['responsive'],
|
|
|
|
|
width: ['responsive'],
|
|
|
|
|
wordBreak: ['responsive'],
|
|
|
|
|
zIndex: ['responsive']
|
|
|
|
|
},
|
|
|
|
|
corePlugins: {
|
|
|
|
|
appearance: false,
|
|
|
|
|
gradientColorStops: false,
|
|
|
|
|
container: false,
|
|
|
|
|
float: false,
|
|
|
|
|
clear: false,
|
|
|
|
|
placeholderColor: false,
|
|
|
|
|
placeholderOpacity: false,
|
|
|
|
|
verticalAlign: false
|
|
|
|
|
},
|
|
|
|
|
plugins: [
|
|
|
|
|
|
|
|
|
|
// teso - Tailwind plugins
|
|
|
|
|
require(path.resolve(__dirname, ('src/@teso/tailwind/plugins/extract-config'))),
|
|
|
|
|
require(path.resolve(__dirname, ('src/@teso/tailwind/plugins/utilities'))),
|
|
|
|
|
require(path.resolve(__dirname, ('src/@teso/tailwind/plugins/icon-size'))),
|
|
|
|
|
require(path.resolve(__dirname, ('src/@teso/tailwind/plugins/theming')))({ themes }),
|
|
|
|
|
|
|
|
|
|
// Other third party and/or custom plugins
|
|
|
|
|
require('@tailwindcss/typography')({ modifiers: ['sm', 'lg'] }),
|
|
|
|
|
require('@tailwindcss/aspect-ratio'),
|
|
|
|
|
require('@tailwindcss/line-clamp')
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
module.exports = config;
|
