mirror of
https://github.com/luckfox-eng29/kvm.git
synced 2026-01-18 11:38:32 +01:00
baf85dcbec
* refactor: Migrate from tailwind.js config to Tailwind CSS configuration and improve component styling - Removed extensive theme and animation configurations from tailwind.config.js, migrating them to index.css for better organization. - Updated components to utilize CSS variables for grid layouts and animations, enhancing maintainability. - Adjusted various components to reflect the new CSS structure, ensuring consistent styling across the application. - Improved accessibility and responsiveness in several UI components, including headers and popovers. - Fixed minor styling issues and optimized class usage for better performance. * style: use default tailwindcss/forms options * refactor(Header): remove unused LuUser icon import
58 lines
2.0 KiB
JavaScript
58 lines
2.0 KiB
JavaScript
import defaultTheme from "tailwindcss/defaultTheme";
|
|
import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
|
|
import svgToDataUri from "mini-svg-data-uri";
|
|
import plugin from "tailwindcss/plugin";
|
|
|
|
/** @type {import("tailwindcss").Config} */
|
|
export default {
|
|
darkMode: "selector",
|
|
plugins: [
|
|
require("@tailwindcss/forms"),
|
|
plugin(function ({ addVariant }) {
|
|
addVariant("disabled-within", `&:has(input:is(:disabled),button:is(:disabled))`);
|
|
}),
|
|
plugin(function ({ addVariant }) {
|
|
addVariant("invalid-within", `&:has(input:is(:invalid))`);
|
|
}),
|
|
function ({ matchUtilities, theme }) {
|
|
matchUtilities(
|
|
{
|
|
"bg-grid-sm": value => ({
|
|
backgroundImage: `url("${svgToDataUri(
|
|
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="${value}"><path d="M0 .5H23.5V24"/></svg>`,
|
|
)}")`,
|
|
}),
|
|
},
|
|
{ values: flattenColorPalette(theme("backgroundColor")), type: "color" },
|
|
);
|
|
},
|
|
function ({ matchUtilities, theme }) {
|
|
matchUtilities(
|
|
{
|
|
"bg-grid": value => ({
|
|
backgroundImage: `url("${svgToDataUri(
|
|
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`,
|
|
)}")`,
|
|
}),
|
|
},
|
|
{ values: flattenColorPalette(theme("backgroundColor")), type: "color" },
|
|
);
|
|
},
|
|
function ({ matchUtilities, theme }) {
|
|
matchUtilities(
|
|
{
|
|
"bg-grid-lg": value => ({
|
|
backgroundImage: `url("${svgToDataUri(
|
|
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128" fill="none" stroke="${value}"><path d="M0 .5H127.5V127"/></svg>`,
|
|
)}")`,
|
|
}),
|
|
},
|
|
{
|
|
values: flattenColorPalette(theme("backgroundColor")),
|
|
type: "color",
|
|
},
|
|
);
|
|
},
|
|
],
|
|
};
|