mirror of
https://github.com/jetkvm/kvm.git
synced 2025-09-16 08:38:14 +00:00
3ec1bdf388
* chore(ui): Patch bump in tailwind related packages and framer-motion tailwind: [4.1.6 -> 4.1.7](https://github.com/tailwindlabs/tailwindcss/compare/v4.1.6...v4.1.7) @tailwindcss/postcss: 4.1.6 -> 4.1.7 @tailwindcss/vite: 4.1.6 -> 4.1.7 Also patch-bump of: framer-motion: [12.11.0 -> 12.11.4](https://github.com/motiondivision/motion/compare/v12.11.0...v12.11.4) No source changes seemingly needed, have not rerun the migrate. * chore(ui): Run tailwind upgrade and review changes Ran the `npx @tailwindcss/upgrade` and accepted the changes that seemed safe. They're things like: - `data-[closed]:translate-y-9` -> `data-closed:translate-y-8` ()swaps the square bracket syntax to a `-` modifier) - `bg-gradient-to-*` -> `bg-linear-to-*` - `/[*%]` -> `/*` (swap square bracket syntax for inline) - `theme(*.*)` -> `var(--*-*)` (theme styles are exposed as variables with hyphens for dots now) - `[background-size:*]` -> `bg-size[*]` (move the square brackets inside tag) - `[.active_&]:` -> `in[.active]:` (new syntax for parent query) - `!class` -> `class!` (e.g. _!overflow-visible_ to _overflow-visible!_, for [important flag](https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-flag style) - `w-[1px]` -> `w-px` (that's a new syntax for a 1px width) - `h-[1px]` -> `h-px` (that's a new syntax for a 1px height) - moved `html` and `html, body` global settings in the _index.css_ Also killed off an unused `import` and blank css class. Also picked up the two `flex-grow` -> `grow` that I missed last pass, oops.
57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
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",
|
|
},
|
|
);
|
|
},
|
|
],
|
|
};
|