wallet-connect-web-examples/dapps/vue-dapp-auth/tailwind.config.js
Pavel Yankovski 7e850d66c4
feat(vue-dapp-auth): Add example dapp on Vue 3 ()
Co-authored-by: Ben Kremer <contact@bkrem.dev>
2022-11-14 18:13:55 +01:00

191 lines
4.2 KiB
JavaScript

const plugin = require('tailwindcss/plugin')
const addHeaders = require('./tailwind/headers')
// get formatted color, by color and opacity
function c(color, opacityValue) {
return opacityValue === undefined
? `rgb(var(${color}))`
: `rgba(var(${color}), ${opacityValue})`
}
// get color-maker method receiving an opacity as the input, by color
function co(color) {
return ({ opacityValue }) => c(color, opacityValue)
}
// Read more about tailwindcss configuration: https://tailwindcss.com/docs/configuration
module.exports = {
mode: 'jit',
prefix: 'tw-',
safelist: [
'light-mode',
'dark-mode',
],
theme: {
// structure
container: {
center: true,
padding: {
DEFAULT: '1.5rem',
md: '2rem',
lg: '2.5rem',
},
},
fontFamily: {
main: [
'-apple-system',
'"Segoe UI"',
'Helvetica',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
],
mono: ['monospace'],
},
lineHeight: {
none: 1,
xs: 1.1,
sm: 1.15,
},
// colors
colors: {
black: co('--c-black'),
white: co('--c-white'),
divider: co('--c-divider'),
muted: co('--c-divider-muted'),
accent: {
primary: co('--c-accent-primary'),
secondary: co('--c-accent-secondary'),
},
state: {
error: co('--c-state-error'),
success: co('--c-state-success'),
},
},
textColor: theme => ({
...theme('colors'),
'custom': co('--text-color'),
'base': co('--c-text-base'),
'dim-1': co('--c-text-dim-1'),
'dim-2': co('--c-text-dim-2'),
'dim-3': co('--c-text-dim-3'),
'bg': co('--c-bg-base'),
}),
backgroundColor: theme => ({
...theme('colors'),
'custom': co('--bg-color'),
'base': co('--c-bg-base'),
'dim-1': co('--c-bg-dim-1'),
'placeholder': co('--c-bg-placeholder'),
}),
borderColor: theme => ({
...theme('colors'),
base: co('--c-text-base'),
transparent: 'transparent',
custom: co('--border-color'),
}),
fill: theme => ({
...theme('backgroundColor'),
}),
stroke: theme => ({
...theme('borderColor'),
}),
// opacity
opacity: {
0: '0',
muted: '0.5',
soft: '0.8',
full: '1',
outline: 'var(--o-outline)',
},
textOpacity: theme => ({
...theme('opacity'),
custom: 'var(--text-opacity)',
}),
backgroundOpacity: theme => ({
...theme('opacity'),
custom: 'var(--bg-opacity)',
}),
borderOpacity: theme => ({
...theme('opacity'),
custom: 'var(--border-opacity)',
}),
transitionDuration: {
fast: '250ms',
normal: '500ms',
slow: '750ms',
},
zIndex: {
muted: '-1',
1: '1',
},
borderRadius: {
0: '0',
sm: '0.75rem',
DEFAULT: '1rem',
lg: '1.5rem',
full: '9999px',
},
scale: {
0: '0',
click: '0.975',
normal: '1',
},
extend: {
blur: {
px: '1px',
xs: '2px',
},
fontSize: {
'1/2': '0.5em',
'5/8': '0.625em',
'3/4': '0.75em',
'7/8': '0.875em',
'9/8': '1.125em',
'5/4': '1.25em',
'3/2': '1.5em',
},
boxShadow: {
// shadows for dialogs, popups etc
card: '0 0 2rem -1.75rem rgb(var(--c-accent-secondary))',
},
},
},
plugins: [
plugin(addHeaders),
({ addUtilities, matchUtilities, theme }) => {
const size = value => ({
height: value,
minHeight: value,
width: value,
minWidth: value,
})
matchUtilities(
{
size,
circle: value => ({
...size(value),
borderRadius: theme('borderRadius.full'),
}),
},
{ values: theme('height') },
)
addUtilities({
'.duration-onhover-fast': {
'transitionDuration': theme('transitionDuration.normal'),
'&:hover': {
transitionDuration: theme('transitionDuration.fast'),
},
},
})
},
],
}