143 lines
4.3 KiB
JavaScript
143 lines
4.3 KiB
JavaScript
import plugin from 'tailwindcss/plugin';
|
|
|
|
const colors = {
|
|
primary: 'var(--clr-primary)',
|
|
'surface-tint': 'var(--clr-surface-tint)',
|
|
'on-primary': 'var(--clr-on-primary)',
|
|
'primary-container': 'var(--clr-primary-container)',
|
|
'on-primary-container': 'var(--clr-on-primary-container)',
|
|
secondary: 'var(--clr-secondary)',
|
|
'on-secondary': 'var(--clr-on-secondary)',
|
|
'secondary-container': 'var(--clr-secondary-container)',
|
|
'on-secondary-container': 'var(--clr-on-secondary-container)',
|
|
tertiary: 'var(--clr-tertiary)',
|
|
'on-tertiary': 'var(--clr-on-tertiary)',
|
|
'tertiary-container': 'var(--clr-tertiary-container)',
|
|
'on-tertiary-container': 'var(--clr-on-tertiary-container)',
|
|
error: 'var(--clr-error)',
|
|
'on-error': 'var(--clr-on-error)',
|
|
'error-container': 'var(--clr-error-container)',
|
|
'on-error-container': 'var(--clr-on-error-container)',
|
|
background: 'var(--clr-background)',
|
|
'on-background': 'var(--clr-on-background)',
|
|
surface: 'var(--clr-surface)',
|
|
'on-surface': 'var(--clr-on-surface)',
|
|
'surface-variant': 'var(--clr-surface-variant)',
|
|
'on-surface-variant': 'var(--clr-on-surface-variant)',
|
|
outline: 'var(--clr-outline)',
|
|
'outline-variant': 'var(--clr-outline-variant)',
|
|
shadow: 'var(--clr-shadow)',
|
|
scrim: 'var(--clr-scrim)',
|
|
'inverse-surface': 'var(--clr-inverse-surface)',
|
|
'inverse-on-surface': 'var(--clr-inverse-on-surface)',
|
|
'inverse-primary': 'var(--clr-inverse-primary)',
|
|
'primary-fixed': 'var(--clr-primary-fixed)',
|
|
'on-primary-fixed': 'var(--clr-on-primary-fixed)',
|
|
'primary-fixed-dim': 'var(--clr-primary-fixed-dim)',
|
|
'on-primary-fixed-variant': 'var(--clr-on-primary-fixed-variant)',
|
|
'secondary-fixed': 'var(--clr-secondary-fixed)',
|
|
'on-secondary-fixed': 'var(--clr-on-secondary-fixed)',
|
|
'secondary-fixed-dim': 'var(--clr-secondary-fixed-dim)',
|
|
'on-secondary-fixed-variant': 'var(--clr-on-secondary-fixed-variant)',
|
|
'tertiary-fixed': 'var(--clr-tertiary-fixed)',
|
|
'on-tertiary-fixed': 'var(--clr-on-tertiary-fixed)',
|
|
'tertiary-fixed-dim': 'var(--clr-tertiary-fixed-dim)',
|
|
'on-tertiary-fixed-variant': 'var(--clr-on-tertiary-fixed-variant)',
|
|
'surface-dim': 'var(--clr-surface-dim)',
|
|
'surface-bright': 'var(--clr-surface-bright)',
|
|
'surface-container-lowest': 'var(--clr-surface-container-lowest)',
|
|
'surface-container-low': 'var(--clr-surface-container-low)',
|
|
'surface-container': 'var(--clr-surface-container)',
|
|
'surface-container-high': 'var(--clr-surface-container-high)',
|
|
'surface-container-highest': 'var(--clr-surface-container-highest)',
|
|
|
|
// --- OWN ---
|
|
bright: 'var(--clr-bright)',
|
|
dark: 'var(--clr-dark)',
|
|
};
|
|
|
|
const width = {
|
|
prose: '80ch',
|
|
};
|
|
|
|
export default {
|
|
content: ['./view/**/*.templ'],
|
|
blocklist: ['container'],
|
|
theme: {
|
|
extend: {
|
|
colors() {
|
|
const colorExtensions = Object.keys(colors).reduce((prev, curr) => {
|
|
const color = colors[curr];
|
|
|
|
prev[curr] = `rgba(${color}, var(--tw-bg-opacity, 1))`;
|
|
for (let i = 0; i <= 100; i += 5) {
|
|
prev[`${curr}/${i}`] = `rgba(${color}, ${(i / 100).toFixed(2)})`;
|
|
}
|
|
|
|
return prev;
|
|
}, {});
|
|
|
|
colorExtensions['on-bg'] = 'var(--on-bg-color)';
|
|
|
|
return colorExtensions;
|
|
},
|
|
width,
|
|
minWidth: width,
|
|
maxWidth: width,
|
|
borderWidth: {
|
|
3: '3px',
|
|
},
|
|
},
|
|
screens: {
|
|
'2xl': '1400px',
|
|
xl: '1200px',
|
|
l: '992px',
|
|
m: '768px',
|
|
s: '576px',
|
|
xs: '420px',
|
|
xxs: '340px',
|
|
},
|
|
},
|
|
plugins: [
|
|
plugin(({ addBase, addUtilities, addVariant, theme }) => {
|
|
/* added 'light:' styles */
|
|
addVariant('light', ':root:has(#theme-switcher:checked) &');
|
|
/* added 'dark:' styles, only for dark-mode */
|
|
addVariant('dark', ':root:not(:has(#theme-switcher:checked)) &');
|
|
|
|
addUtilities({
|
|
'.flex-center': {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
'.absolute-center': {
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
},
|
|
'.focusable': {
|
|
// its centered and prevents scrolling
|
|
position: 'absolute',
|
|
display: 'block !important',
|
|
top: '50%',
|
|
left: '-150vw',
|
|
height: '1px',
|
|
width: '1px',
|
|
overflow: 'hidden',
|
|
opacity: '0',
|
|
},
|
|
});
|
|
|
|
const base = {};
|
|
|
|
Object.keys(colors).forEach(color => {
|
|
const themeVal = theme(`colors.on-${color}`);
|
|
if (themeVal) base[`.bg-${color}`] = { '--on-bg-color': themeVal };
|
|
});
|
|
|
|
addBase(base);
|
|
}),
|
|
],
|
|
};
|