101 lines
2.6 KiB
JavaScript
101 lines
2.6 KiB
JavaScript
let colors = {
|
|
"base": "var(--color-base)",
|
|
"surface-0": "var(--color-surface-0)",
|
|
"surface-1": "var(--color-surface-1)",
|
|
"surface-2": "var(--color-surface-2)",
|
|
"text": "var(--color-text)",
|
|
"accent": "var(--color-accent)",
|
|
"accent-over": "var(--color-accent-hover)",
|
|
"border": "var(--color-border)",
|
|
"rosewater": "var(--color-rosewater)",
|
|
"mauve": "var(--color-mauve)",
|
|
"flamingo": "var(--color-flamingo)",
|
|
"pink": "var(--color-pink)",
|
|
"red": "var(--color-red)",
|
|
"maroon": "var(--color-maroon)",
|
|
"yellow": "var(--color-yellow)",
|
|
"teal": "var(--color-teal)",
|
|
"sky": "var(--color-sky)",
|
|
"sapphire": "var(--color-sapphire)",
|
|
"blue": "var(--color-blue)",
|
|
"lavender": "var(--color-lavender)",
|
|
"overlay-0": "var(--color-overlay-0)",
|
|
"overlay-1": "var(--color-overlay-1)",
|
|
"overlay-2": "var(--color-overlay-2)",
|
|
}
|
|
|
|
// Add var(--color-*-100/200/../950) automatically to the tailwind config colors defined above
|
|
// This will generate 10 shades for each color
|
|
|
|
// Generate shades for each color
|
|
//
|
|
// Example:
|
|
// 'surface-0' {
|
|
// 100: 'var(--color-surface0-100)',
|
|
// 200: 'var(--color-surface0-200)',
|
|
// ...
|
|
// 950: 'var(--color-surface0-950)',
|
|
// }
|
|
// 'blue' {
|
|
// 100: 'var(--color-blue-100)',
|
|
// }
|
|
const shades = Object.keys(colors).reduce((acc, color) => {
|
|
acc[color] = {}
|
|
for (let i = 100; i <= 950; i += 100) {
|
|
acc[color][i] = `var(--color-${color}-${i})`
|
|
}
|
|
return acc
|
|
}
|
|
, {})
|
|
|
|
// Move the color key to the DEFAULT element
|
|
|
|
// Example:
|
|
// 'blue' {
|
|
// DEFAULT: 'var(--color-blue)',
|
|
// 100: 'var(--color-blue-100)',
|
|
// }
|
|
Object.keys(shades).forEach(color => {
|
|
shades[color] = {
|
|
DEFAULT: colors[color],
|
|
...shades[color]
|
|
}
|
|
})
|
|
|
|
let safelistData = [];
|
|
|
|
Object.keys(shades).forEach(color => {
|
|
for (let index = 1; index < 10; index++) {
|
|
const id = index * 100;
|
|
const strId = '-' + id;
|
|
|
|
safelistData.push("from-" + color + strId);
|
|
safelistData.push("to-" + color + strId);
|
|
safelistData.push("bg-" + color + strId);
|
|
safelistData.push("bg-" + color);
|
|
safelistData.push("border-" + color + strId);
|
|
safelistData.push("border-" + color);
|
|
}
|
|
})
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
"./components/**/*.{js,vue,ts}",
|
|
"./layouts/**/*.vue",
|
|
"./pages/**/*.vue",
|
|
"./plugins/**/*.{js,ts}",
|
|
"./app.vue",
|
|
"./error.vue",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: shades
|
|
},
|
|
},
|
|
safelist: safelistData
|
|
|
|
// Include ALL colors by default, no optimizations
|
|
|
|
};
|
|
|