mirror of
https://github.com/kieraneglin/pinchflat.git
synced 2026-01-23 02:24:24 +00:00
384 lines
11 KiB
JavaScript
384 lines
11 KiB
JavaScript
// See the Tailwind configuration guide for advanced usage
|
|
// https://tailwindcss.com/docs/configuration
|
|
|
|
const plugin = require('tailwindcss/plugin')
|
|
const defaultTheme = require('tailwindcss/defaultTheme')
|
|
const fs = require('fs')
|
|
const path = require('path')
|
|
|
|
module.exports = {
|
|
content: ['./js/**/*.js', '../lib/pinchflat_web.ex', '../lib/pinchflat_web/**/*.*ex'],
|
|
darkMode: 'class',
|
|
theme: {
|
|
fontFamily: {
|
|
satoshi: ['Satoshi', 'sans-serif'],
|
|
...defaultTheme.fontFamily
|
|
},
|
|
screens: {
|
|
'2xsm': '375px',
|
|
xsm: '425px',
|
|
'3xl': '2000px',
|
|
...defaultTheme.screens
|
|
},
|
|
extend: {
|
|
colors: {
|
|
current: 'currentColor',
|
|
transparent: 'transparent',
|
|
white: '#FFFFFF',
|
|
black: '#1C2434',
|
|
'black-2': '#010101',
|
|
body: '#64748B',
|
|
bodydark: '#AEB7C0',
|
|
bodydark1: '#DEE4EE',
|
|
bodydark2: '#8A99AF',
|
|
primary: '#3C50E0',
|
|
secondary: '#80CAEE',
|
|
stroke: '#E2E8F0',
|
|
gray: '#EFF4FB',
|
|
graydark: '#333A48',
|
|
'gray-2': '#F7F9FC',
|
|
'gray-3': '#FAFAFA',
|
|
whiten: '#F1F5F9',
|
|
whiter: '#F5F7FD',
|
|
boxdark: '#24303F',
|
|
'boxdark-2': '#1A222C',
|
|
strokedark: '#2E3A47',
|
|
'form-strokedark': '#3d4d60',
|
|
'form-input': '#1d2a39',
|
|
'meta-1': '#DC3545',
|
|
'meta-2': '#EFF2F7',
|
|
'meta-3': '#10B981',
|
|
'meta-4': '#313D4A',
|
|
'meta-5': '#259AE6',
|
|
'meta-6': '#FFBA00',
|
|
'meta-7': '#FF6766',
|
|
'meta-8': '#F0950C',
|
|
'meta-9': '#E5E7EB',
|
|
success: '#219653',
|
|
danger: '#D34053',
|
|
warning: '#FFA70B'
|
|
},
|
|
fontSize: {
|
|
'title-xxl': ['44px', '55px'],
|
|
'title-xl': ['36px', '45px'],
|
|
'title-xl2': ['33px', '45px'],
|
|
'title-lg': ['28px', '35px'],
|
|
'title-md': ['24px', '30px'],
|
|
'title-md2': ['26px', '30px'],
|
|
'title-sm': ['20px', '26px'],
|
|
'title-xsm': ['18px', '24px']
|
|
},
|
|
spacing: {
|
|
4.5: '1.125rem',
|
|
5.5: '1.375rem',
|
|
6.5: '1.625rem',
|
|
7.5: '1.875rem',
|
|
8.5: '2.125rem',
|
|
9.5: '2.375rem',
|
|
10.5: '2.625rem',
|
|
11: '2.75rem',
|
|
11.5: '2.875rem',
|
|
12.5: '3.125rem',
|
|
13: '3.25rem',
|
|
13.5: '3.375rem',
|
|
14: '3.5rem',
|
|
14.5: '3.625rem',
|
|
15: '3.75rem',
|
|
15.5: '3.875rem',
|
|
16: '4rem',
|
|
16.5: '4.125rem',
|
|
17: '4.25rem',
|
|
17.5: '4.375rem',
|
|
18: '4.5rem',
|
|
18.5: '4.625rem',
|
|
19: '4.75rem',
|
|
19.5: '4.875rem',
|
|
21: '5.25rem',
|
|
21.5: '5.375rem',
|
|
22: '5.5rem',
|
|
22.5: '5.625rem',
|
|
24.5: '6.125rem',
|
|
25: '6.25rem',
|
|
25.5: '6.375rem',
|
|
26: '6.5rem',
|
|
27: '6.75rem',
|
|
27.5: '6.875rem',
|
|
29: '7.25rem',
|
|
29.5: '7.375rem',
|
|
30: '7.5rem',
|
|
31: '7.75rem',
|
|
32.5: '8.125rem',
|
|
34: '8.5rem',
|
|
34.5: '8.625rem',
|
|
35: '8.75rem',
|
|
36.5: '9.125rem',
|
|
37.5: '9.375rem',
|
|
39: '9.75rem',
|
|
39.5: '9.875rem',
|
|
40: '10rem',
|
|
42.5: '10.625rem',
|
|
44: '11rem',
|
|
45: '11.25rem',
|
|
46: '11.5rem',
|
|
47.5: '11.875rem',
|
|
49: '12.25rem',
|
|
50: '12.5rem',
|
|
52: '13rem',
|
|
52.5: '13.125rem',
|
|
54: '13.5rem',
|
|
54.5: '13.625rem',
|
|
55: '13.75rem',
|
|
55.5: '13.875rem',
|
|
59: '14.75rem',
|
|
60: '15rem',
|
|
62.5: '15.625rem',
|
|
65: '16.25rem',
|
|
67: '16.75rem',
|
|
67.5: '16.875rem',
|
|
70: '17.5rem',
|
|
72.5: '18.125rem',
|
|
73: '18.25rem',
|
|
75: '18.75rem',
|
|
90: '22.5rem',
|
|
94: '23.5rem',
|
|
95: '23.75rem',
|
|
100: '25rem',
|
|
115: '28.75rem',
|
|
125: '31.25rem',
|
|
132.5: '33.125rem',
|
|
150: '37.5rem',
|
|
171.5: '42.875rem',
|
|
180: '45rem',
|
|
187.5: '46.875rem',
|
|
203: '50.75rem',
|
|
230: '57.5rem',
|
|
242.5: '60.625rem'
|
|
},
|
|
maxWidth: {
|
|
2.5: '0.625rem',
|
|
3: '0.75rem',
|
|
4: '1rem',
|
|
11: '2.75rem',
|
|
13: '3.25rem',
|
|
14: '3.5rem',
|
|
15: '3.75rem',
|
|
22.5: '5.625rem',
|
|
25: '6.25rem',
|
|
30: '7.5rem',
|
|
34: '8.5rem',
|
|
35: '8.75rem',
|
|
40: '10rem',
|
|
42.5: '10.625rem',
|
|
44: '11rem',
|
|
45: '11.25rem',
|
|
60: '15rem',
|
|
70: '17.5rem',
|
|
90: '22.5rem',
|
|
94: '23.5rem',
|
|
125: '31.25rem',
|
|
132.5: '33.125rem',
|
|
142.5: '35.625rem',
|
|
150: '37.5rem',
|
|
180: '45rem',
|
|
203: '50.75rem',
|
|
230: '57.5rem',
|
|
242.5: '60.625rem',
|
|
270: '67.5rem',
|
|
280: '70rem',
|
|
292.5: '73.125rem'
|
|
},
|
|
maxHeight: {
|
|
35: '8.75rem',
|
|
70: '17.5rem',
|
|
90: '22.5rem',
|
|
550: '34.375rem',
|
|
300: '18.75rem'
|
|
},
|
|
minWidth: {
|
|
22.5: '5.625rem',
|
|
42.5: '10.625rem',
|
|
47.5: '11.875rem',
|
|
75: '18.75rem'
|
|
},
|
|
zIndex: {
|
|
999999: '999999',
|
|
99999: '99999',
|
|
9999: '9999',
|
|
999: '999',
|
|
99: '99',
|
|
9: '9',
|
|
1: '1'
|
|
},
|
|
opacity: {
|
|
65: '.65'
|
|
},
|
|
transitionProperty: { width: 'width', stroke: 'stroke' },
|
|
borderWidth: {
|
|
6: '6px'
|
|
},
|
|
boxShadow: {
|
|
default: '0px 8px 13px -3px rgba(0, 0, 0, 0.07)',
|
|
card: '0px 1px 3px rgba(0, 0, 0, 0.12)',
|
|
'card-2': '0px 1px 2px rgba(0, 0, 0, 0.05)',
|
|
switcher:
|
|
'0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 2px 2px #FFFFFF, inset 0px -1px 1px rgba(0, 0, 0, 0.1)',
|
|
'switch-1': '0px 0px 5px rgba(0, 0, 0, 0.15)',
|
|
1: '0px 1px 3px rgba(0, 0, 0, 0.08)',
|
|
2: '0px 1px 4px rgba(0, 0, 0, 0.12)',
|
|
3: '0px 1px 5px rgba(0, 0, 0, 0.14)',
|
|
4: '0px 4px 10px rgba(0, 0, 0, 0.12)',
|
|
5: '0px 1px 1px rgba(0, 0, 0, 0.15)',
|
|
6: '0px 3px 15px rgba(0, 0, 0, 0.1)',
|
|
7: '-5px 0 0 #313D4A, 5px 0 0 #313D4A',
|
|
8: '1px 0 0 #313D4A, -1px 0 0 #313D4A, 0 1px 0 #313D4A, 0 -1px 0 #313D4A, 0 3px 13px rgb(0 0 0 / 8%)'
|
|
},
|
|
dropShadow: {
|
|
1: '0px 1px 0px #E2E8F0',
|
|
2: '0px 1px 4px rgba(0, 0, 0, 0.12)'
|
|
},
|
|
keyframes: {
|
|
linspin: {
|
|
'100%': { transform: 'rotate(360deg)' }
|
|
},
|
|
easespin: {
|
|
'12.5%': { transform: 'rotate(135deg)' },
|
|
'25%': { transform: 'rotate(270deg)' },
|
|
'37.5%': { transform: 'rotate(405deg)' },
|
|
'50%': { transform: 'rotate(540deg)' },
|
|
'62.5%': { transform: 'rotate(675deg)' },
|
|
'75%': { transform: 'rotate(810deg)' },
|
|
'87.5%': { transform: 'rotate(945deg)' },
|
|
'100%': { transform: 'rotate(1080deg)' }
|
|
},
|
|
'left-spin': {
|
|
'0%': { transform: 'rotate(130deg)' },
|
|
'50%': { transform: 'rotate(-5deg)' },
|
|
'100%': { transform: 'rotate(130deg)' }
|
|
},
|
|
'right-spin': {
|
|
'0%': { transform: 'rotate(-130deg)' },
|
|
'50%': { transform: 'rotate(5deg)' },
|
|
'100%': { transform: 'rotate(-130deg)' }
|
|
},
|
|
rotating: {
|
|
'0%, 100%': { transform: 'rotate(360deg)' },
|
|
'50%': { transform: 'rotate(0deg)' }
|
|
},
|
|
topbottom: {
|
|
'0%, 100%': { transform: 'translate3d(0, -100%, 0)' },
|
|
'50%': { transform: 'translate3d(0, 0, 0)' }
|
|
},
|
|
bottomtop: {
|
|
'0%, 100%': { transform: 'translate3d(0, 0, 0)' },
|
|
'50%': { transform: 'translate3d(0, -100%, 0)' }
|
|
}
|
|
},
|
|
animation: {
|
|
linspin: 'linspin 1568.2353ms linear infinite',
|
|
easespin: 'easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both',
|
|
'left-spin': 'left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both',
|
|
'right-spin': 'right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both',
|
|
'ping-once': 'ping 5s cubic-bezier(0, 0, 0.2, 1)',
|
|
rotating: 'rotating 30s linear infinite',
|
|
topbottom: 'topbottom 60s infinite alternate linear',
|
|
bottomtop: 'bottomtop 60s infinite alternate linear',
|
|
'spin-1.5': 'spin 1.5s linear infinite',
|
|
'spin-2': 'spin 2s linear infinite',
|
|
'spin-3': 'spin 3s linear infinite'
|
|
}
|
|
}
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/forms'),
|
|
// Allows prefixing tailwind classes with LiveView classes to add rules
|
|
// only when LiveView classes are applied, for example:
|
|
//
|
|
// <div class="phx-click-loading:animate-ping">
|
|
//
|
|
plugin(({ addVariant }) =>
|
|
addVariant('phx-no-feedback', ['.phx-no-feedback&', '.phx-no-feedback &'])
|
|
),
|
|
plugin(({ addVariant }) =>
|
|
addVariant('phx-click-loading', ['.phx-click-loading&', '.phx-click-loading &'])
|
|
),
|
|
plugin(({ addVariant }) =>
|
|
addVariant('phx-submit-loading', ['.phx-submit-loading&', '.phx-submit-loading &'])
|
|
),
|
|
plugin(({ addVariant }) =>
|
|
addVariant('phx-change-loading', ['.phx-change-loading&', '.phx-change-loading &'])
|
|
),
|
|
|
|
// Embeds Heroicons (https://heroicons.com) into your app.css bundle
|
|
// See your `CoreComponents.icon/1` for more information.
|
|
//
|
|
plugin(function ({ matchComponents, theme }) {
|
|
let iconsDir = path.join(__dirname, './vendor/heroicons/optimized')
|
|
let values = {}
|
|
let icons = [
|
|
['', '/24/outline'],
|
|
['-solid', '/24/solid'],
|
|
['-mini', '/20/solid']
|
|
]
|
|
icons.forEach(([suffix, dir]) => {
|
|
fs.readdirSync(path.join(iconsDir, dir)).forEach((file) => {
|
|
let name = path.basename(file, '.svg') + suffix
|
|
values[name] = { name, fullPath: path.join(iconsDir, dir, file) }
|
|
})
|
|
})
|
|
matchComponents(
|
|
{
|
|
hero: ({ name, fullPath }) => {
|
|
let content = fs
|
|
.readFileSync(fullPath)
|
|
.toString()
|
|
.replace(/\r?\n|\r/g, '')
|
|
return {
|
|
[`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
|
|
'-webkit-mask': `var(--hero-${name})`,
|
|
mask: `var(--hero-${name})`,
|
|
'mask-repeat': 'no-repeat',
|
|
'background-color': 'currentColor',
|
|
'vertical-align': 'middle',
|
|
display: 'inline-block',
|
|
width: theme('spacing.5'),
|
|
height: theme('spacing.5')
|
|
}
|
|
}
|
|
},
|
|
{ values }
|
|
)
|
|
}),
|
|
plugin(function ({ matchComponents, theme }) {
|
|
let iconsDir = path.join(__dirname, './vendor/simple-icons')
|
|
let values = {}
|
|
|
|
fs.readdirSync(iconsDir).forEach((file) => {
|
|
let name = path.basename(file, '.svg')
|
|
values[name] = { name, fullPath: path.join(iconsDir, file) }
|
|
})
|
|
|
|
matchComponents(
|
|
{
|
|
si: ({ name, fullPath }) => {
|
|
let content = fs
|
|
.readFileSync(fullPath)
|
|
.toString()
|
|
.replace(/\r?\n|\r/g, '')
|
|
return {
|
|
[`--si-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
|
|
'-webkit-mask': `var(--si-${name})`,
|
|
mask: `var(--si-${name})`,
|
|
'mask-repeat': 'no-repeat',
|
|
'background-color': 'currentColor',
|
|
'vertical-align': 'middle',
|
|
display: 'inline-block',
|
|
width: theme('spacing.5'),
|
|
height: theme('spacing.5')
|
|
}
|
|
}
|
|
},
|
|
{ values }
|
|
)
|
|
})
|
|
]
|
|
}
|