fuse-angular/tailwind.config.js

450 lines
16 KiB
JavaScript

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/@fuse/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
*
* @param isProd
* This will be automatically supplied by the custom Angular builder
* based on the current environment of the application (prod, dev etc.)
*/
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'
}),
// @tailwindcss/typography
typography: (theme) => ({
DEFAULT: {
css: {
color : 'var(--fuse-text-default)',
'[class~="lead"]' : {
color: 'var(--fuse-text-secondary)'
},
a : {
color: 'var(--fuse-primary-500)'
},
strong : {
color: 'var(--fuse-text-default)'
},
'ol > li::before' : {
color: 'var(--fuse-text-secondary)'
},
'ul > li::before' : {
backgroundColor: 'var(--fuse-text-hint)'
},
hr : {
borderColor: 'var(--fuse-border)'
},
blockquote : {
color : 'var(--fuse-text-default)',
borderLeftColor: 'var(--fuse-border)'
},
h1 : {
color: 'var(--fuse-text-default)'
},
h2 : {
color: 'var(--fuse-text-default)'
},
h3 : {
color: 'var(--fuse-text-default)'
},
h4 : {
color: 'var(--fuse-text-default)'
},
'figure figcaption': {
color: 'var(--fuse-text-secondary)'
},
code : {
color : 'var(--fuse-text-default)',
fontWeight: '500'
},
'a code' : {
color: 'var(--fuse-primary)'
},
pre : {
color : theme('colors.white'),
backgroundColor: theme('colors.gray.800')
},
thead : {
color : 'var(--fuse-text-default)',
borderBottomColor: 'var(--fuse-border)'
},
'tbody tr' : {
borderBottomColor: 'var(--fuse-border)'
}
}
},
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 : ['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 : [
// Fuse - Tailwind plugins
require(path.resolve(__dirname, ('src/@fuse/tailwind/plugins/extract-config'))),
require(path.resolve(__dirname, ('src/@fuse/tailwind/plugins/utilities'))),
require(path.resolve(__dirname, ('src/@fuse/tailwind/plugins/icon-size'))),
require(path.resolve(__dirname, ('src/@fuse/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;