@coconut-software/ui
Version:
React components for faster and easier web development.
299 lines (297 loc) • 9.29 kB
JavaScript
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
purge: false,
theme: {
extend: {
animation: {
'circular-indeterminate-large':
'circular-indeterminate-large 1.4s ease-in-out infinite',
'circular-indeterminate-medium':
'circular-indeterminate-medium 1.4s ease-in-out infinite',
'circular-indeterminate-small':
'circular-indeterminate-small 1.4s ease-in-out infinite',
'linear-indeterminate-1':
'linear-indeterminate-1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite',
'linear-indeterminate-2':
'linear-indeterminate-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite',
'spin-1.4': 'spin 1.4s linear infinite',
},
boxShadow: {
'1': '0px 1px 2px rgba(0, 0, 0, 0.25)',
'2': '0px 2px 4px rgba(0, 0, 0, 0.25)',
'3': '0px 3px 6px rgba(0, 0, 0, 0.25)',
'4': '0px 4px 8px rgba(0, 0, 0, 0.25)',
'5': '0px 5px 10px rgba(0, 0, 0, 0.25)',
'6': '0px 6px 12px rgba(0, 0, 0, 0.25)',
'8': '0px 8px 16px rgba(0, 0, 0, 0.25)',
'12': '0px 12px 24px rgba(0, 0, 0, 0.25)',
'16': '0px 16px 32px rgba(0, 0, 0, 0.25)',
'24': '0px 24px 48px rgba(0, 0, 0, 0.25)',
'input-error-main': `0 0 0 1px theme('colors.error.main'), 0 0 0 1px theme('colors.error.main'), 0 0 0 1px theme('colors.error.main')`,
'input-primary-main': `0 0 0 1px var(--color-primary-main), 0 0 0 1px var(--color-primary-main), 0 0 0 1px var(--color-primary-main)`,
},
borderRadius: {
...defaultTheme.borderRadius,
xl: '0.75rem',
},
borderWidth: {
...defaultTheme.borderWidth,
'6': '6px',
},
colors: {
inherit: 'inherit',
black: {
'90': 'hsla(0,0%,0%,0.9)',
'60': 'hsla(0,0%,0%,0.6)',
'45': 'hsla(0,0%,0%,0.45)',
'30': 'hsla(0,0%,0%,0.3)',
'25': 'hsla(0,0%,0%,0.25)',
'20': 'hsla(0,0%,0%,0.2)',
'15': 'hsla(0,0%,0%,0.15)',
'10': 'hsla(0,0%,0%,0.1)',
'5': 'hsla(0,0%,0%,0.05)',
'15-hex': '#D9D9D9',
'10-hex': '#E5E5E5',
'5-hex': '#F2F2F2',
},
'dark-grey': {
main: 'hsla(0,0%,40%,1)',
darker: 'hsla(0,0%,10%,1)',
dark: 'hsla(0,0%,25%,1)',
light: 'hsla(0,0%,55%,1)',
lighter: 'hsla(0,0%,70%,1)',
},
error: {
main: 'hsla(0,74%,42%,1)',
darker: 'hsla(0,63%,31%,1)',
dark: 'hsla(0,70%,35%,1)',
light: 'hsla(0,94%,82%,1)',
lighter: 'hsla(0,86%,97%,1)',
'20': 'hsla(0,74%,42%,0.2)',
'15': 'hsla(0,74%,42%,0.15)',
'10': 'hsla(0,74%,42%,0.1)',
},
info: {
main: 'hsla(221,83%,53%,1)',
darker: 'hsla(221,100%,28%,1)',
dark: 'hsla(221,100%,43%,1)',
light: 'hsla(221,100%,73%,1)',
lighter: 'hsla(221,100%,95%,1)',
},
'light-grey': {
main: 'hsla(0,0%,90%,1)',
darker: 'hsla(0,0%,80%,1)',
dark: 'hsla(0,0%,85%,1)',
light: 'hsla(0,0%,95%,1)',
lighter: 'hsla(0,0%,98%,1)',
},
primary: {
main: 'var(--color-primary-main)',
darker: 'var(--color-primary-darker)',
dark: 'var(--color-primary-dark)',
light: 'var(--color-primary-light)',
lighter: 'var(--color-primary-lighter)',
'20': 'var(--color-primary-20)',
'15': 'var(--color-primary-15)',
'10': 'var(--color-primary-10)',
},
secondary: {
main: 'var(--color-secondary-main)',
darker: 'var(--color-secondary-darker)',
dark: 'var(--color-secondary-dark)',
light: 'var(--color-secondary-light)',
lighter: 'var(--color-secondary-lighter)',
'20': 'var(--color-secondary-20)',
'15': 'var(--color-secondary-15)',
'10': 'var(--color-secondary-10)',
},
success: {
main: 'hsla(122,39%,49%,1)',
darker: 'hsla(122,39%,19%,1)',
dark: 'hsla(122,39%,34%,1)',
light: 'hsla(122,39%,64%,1)',
lighter: 'hsla(122,39%,95%,1)',
},
warning: {
main: 'hsla(36,100%,50%,1)',
darker: 'hsla(36,100%,20%,1)',
dark: 'hsla(36,100%,35%,1)',
light: 'hsla(36,100%,65%,1)',
lighter: 'hsla(36,100%,95%,1)',
},
white: {
'100': 'hsla(0,0%,100%,1)',
'90': 'hsla(0,0%,100%,0.9)',
'60': 'hsla(0,0%,100%,0.6)',
'45': 'hsla(0,0%,100%,0.45)',
'30': 'hsla(0,0%,100%,0.3)',
'25': 'hsla(0,0%,100%,0.25)',
'20': 'hsla(0,0%,100%,0.2)',
'15': 'hsla(0,0%,100%,0.15)',
'10': 'hsla(0,0%,100%,0.1)',
'5': 'hsla(0,0%,100%,0.05)',
},
},
fontFamily: {
sans: ['Roboto', ...defaultTheme.fontFamily.sans],
},
fontSize: {
'3xl': '2.125rem',
'4xl': '3rem',
'5xl': '3.75rem',
'6xl': '6rem',
},
height: {
...defaultTheme.height,
'11': '2.75rem',
'14': '3.5rem',
'15': '3.75rem',
},
inset: {
...defaultTheme.inset,
'7/50': '14%',
'-px': '-1px',
},
keyframes: {
'circular-indeterminate-large': {
'0%': {
strokeDasharray: '1px 200px',
strokeDashoffset: '0px',
},
'50%': {
strokeDasharray: '100px, 200px',
strokeDashoffset: '-15px',
},
'100%': {
strokeDasharray: '100px, 200px',
strokeDashoffset: '-125px',
},
},
'circular-indeterminate-medium': {
'0%': {
strokeDasharray: '0.6px 109px',
strokeDashoffset: '0px',
},
'50%': {
strokeDasharray: '55px, 109px',
strokeDashoffset: '-8px',
},
'100%': {
strokeDasharray: '55px, 109px',
strokeDashoffset: '-68px',
},
},
'circular-indeterminate-small': {
'0%': {
strokeDasharray: '0.4px 73px',
strokeDashoffset: '0px',
},
'50%': {
strokeDasharray: '36px, 73px',
strokeDashoffset: '-5px',
},
'100%': {
strokeDasharray: '36px, 73px',
strokeDashoffset: '-45px',
},
},
'linear-indeterminate-1': {
'0%': { left: '-35%', right: '100%' },
'60%': { left: '100%', right: '-90%' },
'100%': { left: '100%', right: '-90%' },
},
'linear-indeterminate-2': {
'0%': { left: '-200%', right: '100%' },
'60%': { left: '107%', right: '-8%' },
'100%': { left: '107%', right: '-8%' },
},
},
lineHeight: {
...defaultTheme.lineHeight,
'4.5': '1.125rem',
'11': '2.75rem',
'12': '3rem',
tighter: '1.1666666667',
snug: '1.333',
looser: '2.5',
},
maxWidth: {
...defaultTheme.maxWidth,
'0': '0',
'(full-4)': 'calc(100% - 1rem)',
'(full-6)': 'calc(100% - 1.5rem)',
'(full-12)': 'calc(100% - 3rem)',
'(screen-16)': 'calc(100vw - 4rem)',
screen: '100vw',
},
minWidth: {
...defaultTheme.minWidth,
fit: 'fit-content',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'11': '2.75rem',
'14': '3.5rem',
'40': '10rem',
'60': '15rem',
},
maxHeight: {
...defaultTheme.maxHeight,
'(screen-16)': 'calc(100vh - 4rem)',
inherit: 'inherit',
},
outline: {
'black-100': '2px solid hsla(0,0%,0%,1)',
'white-100': '2px solid hsla(0,0%,100%,1)',
'primary-darker': '2px solid var(--color-primary-darker)',
'secondary-darker': '2px solid var(--color-secondary-darker)',
},
scale: {
...defaultTheme.scale,
'200': '2',
},
spacing: {
...defaultTheme.spacing,
'0.5': '0.125rem',
'0.75': '0.1875rem',
'1.5': '0.375rem',
'2.25': '0.5625rem',
'2.5': '0.625rem',
'3.25': '0.8125rem',
'3.5': '0.875rem',
'4.5': '1.125rem',
'5.5': '1.375rem',
'7': '1.75rem',
'9': '2.25rem',
'11': '2.75rem',
'14': '3.5rem',
'15': '3.75rem',
'18': '4.5rem',
},
transitionProperty: {
...defaultTheme.transitionProperty,
'stroke-dashoffset': 'stroke-dashoffset',
width: 'width',
},
width: {
...defaultTheme.width,
fit: 'fit-content',
'9': '2.25rem',
'11': '2.75rem',
'1/7': '14.2857142857%',
'44': '11rem',
'56': '14rem',
},
zIndex: {
...defaultTheme.zIndex,
'9998': '9998',
'9999': '9999',
},
},
},
}