Jason Kulatunga
456 lines
14 KiB
JavaScript
456 lines
14 KiB
JavaScript
const forEach = require('lodash/forEach');
|
|
const isObject = require('lodash/isObject');
|
|
const {colors} = require('tailwindcss/defaultTheme');
|
|
|
|
module.exports = {
|
|
|
|
// PurgeCSS
|
|
purge: false,
|
|
|
|
// Options
|
|
important: true,
|
|
|
|
// Theme
|
|
theme: {
|
|
colors : {
|
|
current : 'currentColor',
|
|
transparent: 'transparent',
|
|
white : '#FFFFFF',
|
|
black : '#000000',
|
|
gray : {
|
|
'50' : '#F9FAFB',
|
|
'100' : '#F4F5F7',
|
|
'200' : '#E5E7EB',
|
|
'300' : '#D2D6DC',
|
|
'400' : '#9FA6B2',
|
|
'500' : '#6B7280',
|
|
default: '#6B7280',
|
|
'600' : '#4B5563',
|
|
'700' : '#374151',
|
|
'800' : '#252F3F',
|
|
'900' : '#161E2E'
|
|
},
|
|
'cool-gray': {
|
|
'50' : '#FBFDFE',
|
|
'100' : '#F1F5F9',
|
|
'200' : '#E2E8F0',
|
|
'300' : '#CFD8E3',
|
|
'400' : '#97A6BA',
|
|
'500' : '#64748B',
|
|
default: '#64748B',
|
|
'600' : '#475569',
|
|
'700' : '#364152',
|
|
'800' : '#27303F',
|
|
'900' : '#1A202E'
|
|
},
|
|
red : {
|
|
'50' : '#FDF2F2',
|
|
'100' : '#FDE8E8',
|
|
'200' : '#FBD5D5',
|
|
'300' : '#F8B4B4',
|
|
'400' : '#F98080',
|
|
'500' : '#F05252',
|
|
default: '#F05252',
|
|
'600' : '#E02424',
|
|
'700' : '#C81E1E',
|
|
'800' : '#9B1C1C',
|
|
'900' : '#771D1D'
|
|
},
|
|
orange : {
|
|
'50' : '#FFF8F1',
|
|
'100' : '#FEECDC',
|
|
'200' : '#FCD9BD',
|
|
'300' : '#FDBA8C',
|
|
'400' : '#FF8A4C',
|
|
'500' : '#FF5A1F',
|
|
default: '#FF5A1F',
|
|
'600' : '#D03801',
|
|
'700' : '#B43403',
|
|
'800' : '#8A2C0D',
|
|
'900' : '#771D1D'
|
|
},
|
|
yellow : {
|
|
'50' : '#FDFDEA',
|
|
'100' : '#FDF6B2',
|
|
'200' : '#FCE96A',
|
|
'300' : '#FACA15',
|
|
'400' : '#E3A008',
|
|
'500' : '#C27803',
|
|
default: '#C27803',
|
|
'600' : '#9F580A',
|
|
'700' : '#8E4B10',
|
|
'800' : '#723B13',
|
|
'900' : '#633112'
|
|
},
|
|
green : {
|
|
'50' : '#F3FAF7',
|
|
'100' : '#DEF7EC',
|
|
'200' : '#BCF0DA',
|
|
'300' : '#84E1BC',
|
|
'400' : '#31C48D',
|
|
'500' : '#0E9F6E',
|
|
default: '#0E9F6E',
|
|
'600' : '#057A55',
|
|
'700' : '#046C4E',
|
|
'800' : '#03543F',
|
|
'900' : '#014737'
|
|
},
|
|
teal : {
|
|
'50' : '#EDFAFA',
|
|
'100' : '#D5F5F6',
|
|
'200' : '#AFECEF',
|
|
'300' : '#7EDCE2',
|
|
'400' : '#16BDCA',
|
|
'500' : '#0694A2',
|
|
default: '#0694A2',
|
|
'600' : '#047481',
|
|
'700' : '#036672',
|
|
'800' : '#05505C',
|
|
'900' : '#014451'
|
|
},
|
|
blue : {
|
|
'50' : '#EBF5FF',
|
|
'100' : '#E1EFFE',
|
|
'200' : '#C3DDFD',
|
|
'300' : '#A4CAFE',
|
|
'400' : '#76A9FA',
|
|
'500' : '#3F83F8',
|
|
default: '#3F83F8',
|
|
'600' : '#1C64F2',
|
|
'700' : '#1A56DB',
|
|
'800' : '#1E429F',
|
|
'900' : '#233876'
|
|
},
|
|
indigo : {
|
|
'50' : '#F0F5FF',
|
|
'100' : '#E5EDFF',
|
|
'200' : '#CDDBFE',
|
|
'300' : '#B4C6FC',
|
|
'400' : '#8DA2FB',
|
|
'500' : '#6875F5',
|
|
default: '#6875F5',
|
|
'600' : '#5850EC',
|
|
'700' : '#5145CD',
|
|
'800' : '#42389D',
|
|
'900' : '#362F78'
|
|
},
|
|
purple : {
|
|
'50' : '#F6F5FF',
|
|
'100' : '#EDEBFE',
|
|
'200' : '#DCD7FE',
|
|
'300' : '#CABFFD',
|
|
'400' : '#AC94FA',
|
|
'500' : '#9061F9',
|
|
default: '#9061F9',
|
|
'600' : '#7E3AF2',
|
|
'700' : '#6C2BD9',
|
|
'800' : '#5521B5',
|
|
'900' : '#4A1D96'
|
|
},
|
|
pink : {
|
|
'50' : '#FDF2F8',
|
|
'100' : '#FCE8F3',
|
|
'200' : '#FAD1E8',
|
|
'300' : '#F8B4D9',
|
|
'400' : '#F17EB8',
|
|
'500' : '#E74694',
|
|
default: '#E74694',
|
|
'600' : '#D61F69',
|
|
'700' : '#BF125D',
|
|
'800' : '#99154B',
|
|
'900' : '#751A3D'
|
|
}
|
|
},
|
|
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 : {
|
|
// XSmall
|
|
'xs' : {
|
|
min: '0',
|
|
max: '599px'
|
|
},
|
|
// Small
|
|
'sm' : {
|
|
min: '600px',
|
|
max: '959px'
|
|
},
|
|
// Medium
|
|
'md' : {
|
|
min: '960px',
|
|
max: '1279px'
|
|
},
|
|
// Large
|
|
'lg' : {
|
|
min: '1280px',
|
|
max: '1439px'
|
|
},
|
|
// XLarge
|
|
'xl' : {
|
|
min: '1440px'
|
|
},
|
|
// Less than Medium
|
|
'lt-md': {
|
|
max: '959px'
|
|
},
|
|
// Less than Large
|
|
'lt-lg': {
|
|
max: '1279px'
|
|
},
|
|
// Less than XLarge
|
|
'lt-xl': {
|
|
max: '1439px'
|
|
},
|
|
// Greater than XSmall
|
|
'gt-xs': {
|
|
min: '600px'
|
|
},
|
|
// Greater than Small
|
|
'gt-sm': {
|
|
min: '960px'
|
|
},
|
|
// Greater than Medium
|
|
'gt-md': {
|
|
min: '1280px'
|
|
}
|
|
},
|
|
sizes : theme => ({
|
|
// Sizes are used in width & height helpers
|
|
...theme('spacing'),
|
|
'50' : '12.5rem',
|
|
'60' : '15rem',
|
|
'80' : '20rem',
|
|
'90' : '24rem',
|
|
'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',
|
|
'1/2' : '50%',
|
|
'1/3' : '33.33333%',
|
|
'2/3' : '66.66667%',
|
|
'1/4' : '25%',
|
|
'2/4' : '50%',
|
|
'3/4' : '75%',
|
|
'1/5' : '20%',
|
|
'2/5' : '40%',
|
|
'3/5' : '60%',
|
|
'4/5' : '80%',
|
|
'1/12' : '8.33333%',
|
|
'2/12' : '16.66667%',
|
|
'3/12' : '25%',
|
|
'4/12' : '33.33333%',
|
|
'5/12' : '41.66667%',
|
|
'6/12' : '50%',
|
|
'7/12' : '58.33333%',
|
|
'8/12' : '66.66667%',
|
|
'9/12' : '75%',
|
|
'10/12': '83.33333%',
|
|
'11/12': '91.66667%'
|
|
}),
|
|
// Extending default configurations
|
|
extend : {
|
|
/*
|
|
// Once TailwindCSS adds the above colors to their default config,
|
|
// this code will be used for generating the default colors
|
|
// and the theme.colors object will be removed from above
|
|
colors : theme => {
|
|
// Extend the colors to add 'default' values that uses the hue 500.
|
|
// This will generate utilities like 'text-indigo' or 'bg-red',
|
|
// which will be defaulted to the hue 500 of that color palette.
|
|
const defaultColors = colors;
|
|
|
|
forEach(defaultColors, (value, key) => {
|
|
if ( isObject(value) )
|
|
{
|
|
defaultColors[key]['default'] = defaultColors[key]['500']
|
|
}
|
|
});
|
|
return defaultColors;
|
|
},
|
|
*/
|
|
|
|
/*
|
|
// Use this map to define custom contrasting colors for the custom colors
|
|
colorContrasts: theme => ({
|
|
brand-color: {
|
|
50 : theme('colors.brand-color.900'), // Use the 900 from the 'brand-color' palette as the contrasting color of the 50
|
|
100 : theme('colors.brand-color.900'),
|
|
200 : theme('colors.brand-color.900'),
|
|
300 : theme('colors.brand-color.900'),
|
|
400 : theme('colors.brand-color.900'),
|
|
500 : theme('colors.brand-color.900'),
|
|
600 : theme('colors.brand-color.50'),
|
|
700 : theme('colors.brand-color.50'),
|
|
800 : theme('colors.brand-color.50'),
|
|
900 : theme('colors.brand-color.50'),
|
|
default: theme('colors.brand-color.900')
|
|
}
|
|
},
|
|
*/
|
|
|
|
/*
|
|
// Use this map to extend the iconSize utility sizes
|
|
iconSize: {
|
|
8: '8px',
|
|
10: '10px'
|
|
},
|
|
*/
|
|
|
|
boxShadow : {
|
|
solid: '0 0 0 2px currentColor'
|
|
},
|
|
flex : {
|
|
'0': '0 0 auto'
|
|
},
|
|
fontFamily: {
|
|
sans: [
|
|
'Inter',
|
|
'system-ui',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'Roboto',
|
|
'"Helvetica Neue"',
|
|
'Arial',
|
|
'"Noto Sans"',
|
|
'sans-serif',
|
|
'"Apple Color Emoji"',
|
|
'"Segoe UI Emoji"',
|
|
'"Segoe UI Symbol"',
|
|
'"Noto Color Emoji"'
|
|
],
|
|
mono: [
|
|
'"IBM Plex Mono"',
|
|
'Menlo',
|
|
'Monaco',
|
|
'Consolas',
|
|
'"Liberation Mono"',
|
|
'"Courier New"',
|
|
'monospace'
|
|
]
|
|
},
|
|
opacity : {
|
|
12: '0.12',
|
|
38: '0.38',
|
|
54: '0.54',
|
|
70: '0.70',
|
|
84: '0.84'
|
|
},
|
|
rotate : {
|
|
'-270': '270deg',
|
|
'15' : '15deg',
|
|
'30' : '30deg',
|
|
'60' : '60deg',
|
|
'270' : '270deg'
|
|
},
|
|
spacing : {
|
|
'2px': '2px',
|
|
'14' : '3.5rem',
|
|
'18' : '4.5rem',
|
|
'22' : '5.5rem',
|
|
'26' : '6.5rem',
|
|
'28' : '7rem',
|
|
'30' : '7.5rem',
|
|
'36' : '9rem'
|
|
},
|
|
zIndex : {
|
|
'-1' : -1,
|
|
'60' : 60,
|
|
'70' : 70,
|
|
'80' : 80,
|
|
'90' : 90,
|
|
'99' : 99,
|
|
'999' : 999,
|
|
'9999' : 9999,
|
|
'99999': 99999
|
|
},
|
|
maxHeight : theme => ({
|
|
none: 'none',
|
|
...theme('sizes')
|
|
}),
|
|
minHeight : theme => ({
|
|
...theme('sizes')
|
|
}),
|
|
height : theme => ({
|
|
...theme('sizes')
|
|
}),
|
|
maxWidth : theme => ({
|
|
screen: '100vw',
|
|
...theme('sizes')
|
|
}),
|
|
minWidth : theme => ({
|
|
screen: '100vw',
|
|
...theme('sizes')
|
|
}),
|
|
width : theme => ({
|
|
...theme('sizes')
|
|
})
|
|
}
|
|
},
|
|
|
|
// Variants
|
|
variants: {
|
|
backgroundColor : ['dark-light'],
|
|
borderColor : ['dark-light'],
|
|
borderWidth : ['responsive', 'first', 'last'],
|
|
cursor : [],
|
|
fontFamily : [],
|
|
fontSmoothing : [],
|
|
fontWeight : ['responsive'],
|
|
iconSize : ['responsive'],
|
|
resize : [],
|
|
textColor : ['dark-light'],
|
|
scale : [],
|
|
rotate : [],
|
|
translate : [],
|
|
skew : [],
|
|
transitionProperty : [],
|
|
transitionTimingFunction: [],
|
|
transitionDuration : [],
|
|
transitionDelay : []
|
|
},
|
|
|
|
// Core plugins
|
|
corePlugins: {
|
|
container : false,
|
|
clear : false,
|
|
float : false,
|
|
placeholderColor: false
|
|
},
|
|
|
|
// Custom plugins
|
|
plugins: [
|
|
|
|
// Custom plugins required by Treo
|
|
...require('../@treo/tailwind/plugins')
|
|
|
|
// Other third party and custom plugins can be required here
|
|
// ...
|
|
]
|
|
};
|