97 lines
2.1 KiB
JavaScript
97 lines
2.1 KiB
JavaScript
import {
|
|
defineConfig,
|
|
presetIcons,
|
|
presetTypography,
|
|
presetUno,
|
|
presetWebFonts,
|
|
transformerDirectives,
|
|
transformerVariantGroup,
|
|
} from 'unocss';
|
|
|
|
/**
|
|
* Floor tile pattern from https://heropatterns.com/, licensed under the CC BY 4.0 license.
|
|
* @returns {string} - The "url()" string of the pattern.
|
|
*/
|
|
function heropattern() {
|
|
return `url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10h10v10H0V10zM10 0h10v10H10V0z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E")`;
|
|
}
|
|
|
|
export default defineConfig({
|
|
cli: {
|
|
entry: {
|
|
outFile: './assets/css/uno.css',
|
|
patterns: [
|
|
'./{templates,handlers}/**/*.templ',
|
|
'./assets/**/*.{js,css,html}',
|
|
'!./assets/css/uno.css',
|
|
],
|
|
},
|
|
},
|
|
presets: [
|
|
presetIcons(),
|
|
presetTypography(),
|
|
presetUno({
|
|
dark: 'media',
|
|
}),
|
|
presetWebFonts({
|
|
fonts: {
|
|
japanese: {
|
|
name: 'Kaisei Decol',
|
|
},
|
|
sans: {
|
|
name: 'Quattrocento Sans',
|
|
},
|
|
serif: {
|
|
name: 'Quattrocento',
|
|
},
|
|
},
|
|
provider: 'none',
|
|
}),
|
|
],
|
|
rules: [
|
|
[/^(min-|max-)?(w|h)-screen/, ([, m, d]) => [
|
|
[`${m || ''}${d == 'w' ? 'width' : 'height'}`, `100v${d}`],
|
|
[`${m || ''}${d == 'w' ? 'width' : 'height'}`, `100dv${d}`],
|
|
]],
|
|
|
|
[/^text-stroke-(\d+)px/, ([,d]) => {
|
|
return {
|
|
'-webkit-text-stroke-width': `${d}px`,
|
|
'text-stroke-width': `${d}px`,
|
|
};
|
|
}],
|
|
[/^text-stroke-(#?[A-z]+)/, ([,c]) => {
|
|
console.log('HELLO WORLD');
|
|
return {
|
|
'-webkit-text-stroke-color': c,
|
|
'text-stroke-color': c,
|
|
};
|
|
}],
|
|
|
|
[/^vertical-(lr|rl)/, ([, d]) => {
|
|
return { 'writing-mode': `vertical-${d}` };
|
|
}],
|
|
['horizontal-tb', { 'writing-mode': 'horizontal-tb' }],
|
|
|
|
['bg-heropattern', { 'background-image': heropattern() }],
|
|
],
|
|
/* theme: {
|
|
colors: {
|
|
white: 'var(--white)',
|
|
black: 'var(--black)',
|
|
cyan: 'var(--cyan)',
|
|
purple: 'var(--purple)',
|
|
foreground: {
|
|
'00': 'var(--foreground-00)',
|
|
},
|
|
background: {
|
|
'00': 'var(--background-00)',
|
|
},
|
|
accent: {
|
|
'00': 'var(--accent-00)',
|
|
},
|
|
},
|
|
}, */
|
|
transformers: [transformerDirectives(), transformerVariantGroup()],
|
|
});
|