fuse-angular/tailwind.config.js

295 lines
9.3 KiB
JavaScript
Raw Normal View History

2021-04-15 14:13:46 +00:00
const path = require('path');
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!
2021-04-15 14:13:46 +00:00
'default': {
primary : {
...colors.indigo,
DEFAULT: colors.indigo[600]
},
accent : {
...colors.slate,
DEFAULT: colors.slate[800]
2021-04-15 14:13:46 +00:00
},
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 will extend it with their given configuration.
2021-04-15 14:13:46 +00:00
'brand' : {
primary: customPalettes.brand
},
2021-12-22 11:28:13 +00:00
'teal' : {
2021-04-15 14:13:46 +00:00
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 = {
darkMode : 'class',
content : ['./src/**/*.{html,scss,ts}'],
important : true,
theme : {
2021-04-15 14:13:46 +00:00
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 : {
2021-12-22 11:28:13 +00:00
sm: '600px',
md: '960px',
lg: '1280px',
xl: '1440px'
2021-04-15 14:13:46 +00:00
},
extend : {
animation : {
2021-04-15 14:13:46 +00:00
'spin-slow': 'spin 3s linear infinite'
},
colors : {
gray: colors.slate
},
flex : {
2021-04-15 14:13:46 +00:00
'0': '0 0 auto'
},
fontFamily : {
2021-04-15 14:13:46 +00:00
sans: `"Inter var", ${defaultTheme.fontFamily.sans.join(',')}`,
mono: `"IBM Plex Mono", ${defaultTheme.fontFamily.mono.join(',')}`
},
opacity : {
2021-04-15 14:13:46 +00:00
12: '0.12',
38: '0.38',
87: '0.87'
},
rotate : {
2021-04-15 14:13:46 +00:00
'-270': '270deg',
'15' : '15deg',
'30' : '30deg',
'60' : '60deg',
'270' : '270deg'
},
scale : {
2021-04-15 14:13:46 +00:00
'-1': '-1'
},
zIndex : {
2021-04-15 14:13:46 +00:00
'-1' : -1,
'49' : 49,
'60' : 60,
'70' : 70,
'80' : 80,
'90' : 90,
'99' : 99,
'999' : 999,
'9999' : 9999,
'99999': 99999
},
spacing : {
2021-04-15 14:13:46 +00:00
'13': '3.25rem',
'15': '3.75rem',
'18': '4.5rem',
'22': '5.5rem',
'26': '6.5rem',
'30': '7.5rem',
'50': '12.5rem',
'90': '22.5rem',
2021-04-15 14:13:46 +00:00
// 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',
// Fractional values
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%'
2021-04-15 14:13:46 +00:00
},
minHeight : ({theme}) => ({
...theme('spacing')
2021-04-15 14:13:46 +00:00
}),
maxHeight : {
2021-04-15 14:13:46 +00:00
none: 'none'
},
minWidth : ({theme}) => ({
2021-04-15 14:13:46 +00:00
...theme('spacing'),
screen: '100vw'
}),
maxWidth : ({theme}) => ({
2021-04-15 14:13:46 +00:00
...theme('spacing'),
screen: '100vw'
}),
2021-08-31 06:21:28 +00:00
transitionDuration : {
'400': '400ms'
},
transitionTimingFunction: {
'drawer': 'cubic-bezier(0.25, 0.8, 0.25, 1)'
},
2021-04-15 14:13:46 +00:00
// @tailwindcss/typography
typography: ({theme}) => ({
2021-04-15 14:13:46 +00:00
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)'
},
'ol[type="A" s]' : false,
'ol[type="a" s]' : false,
'ol[type="I" s]' : false,
'ol[type="i" s]' : false
2021-04-15 14:13:46 +00:00
}
},
sm : {
css: {
code : {
fontSize: '1em'
},
pre : {
fontSize: '1em'
},
table: {
fontSize: '1em'
}
}
}
})
}
},
corePlugins: {
2021-04-15 14:13:46 +00:00
appearance : false,
container : false,
float : false,
clear : false,
placeholderColor : false,
placeholderOpacity: false,
verticalAlign : false
},
plugins : [
2021-04-15 14:13:46 +00:00
// Fuse - Tailwind plugins
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']})
2021-04-15 14:13:46 +00:00
]
};
module.exports = config;