102 lines
2.7 KiB
JavaScript
102 lines
2.7 KiB
JavaScript
// See the Tailwind configuration guide for advanced usage
|
|
// https://tailwindcss.com/docs/configuration
|
|
|
|
const plugin = require('tailwindcss/plugin');
|
|
const fs = require('fs');
|
|
const path = require('path');
|
|
|
|
module.exports = {
|
|
content: ['./js/**/*.js', '../lib/labelmaker_web.ex', '../lib/labelmaker_web/**/*.*ex'],
|
|
darkmode: 'media',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#6495ED', // cornflowerblue
|
|
highlight: '#74A0EF',
|
|
danger: '#FF6B6B',
|
|
bg: {
|
|
light: '#D1DFFA',
|
|
dark: '#1E2D47',
|
|
},
|
|
fg: {
|
|
light: '#1E2D47',
|
|
dark: '#D1DFFA',
|
|
},
|
|
secondary: {
|
|
light: '#64D9ED',
|
|
dark: '#324B77',
|
|
},
|
|
selected: {
|
|
light: '#6CBDEE',
|
|
dark: '#5376B3',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
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-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, '../deps/heroicons/optimized');
|
|
let values = {};
|
|
let icons = [
|
|
['', '/24/outline'],
|
|
['-solid', '/24/solid'],
|
|
['-mini', '/20/solid'],
|
|
['-micro', '/16/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, '');
|
|
let size = theme('spacing.6');
|
|
if (name.endsWith('-mini')) {
|
|
size = theme('spacing.5');
|
|
} else if (name.endsWith('-micro')) {
|
|
size = theme('spacing.4');
|
|
}
|
|
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: size,
|
|
height: size,
|
|
};
|
|
},
|
|
},
|
|
{ values },
|
|
);
|
|
}),
|
|
],
|
|
};
|