Release 202412292127

2026-01-18 03:28:19 +01:00 · 2024-10-20 17:24:15 +02:00
commit 20780b65db
171 changed files with 24344 additions and 0 deletions
--- a/ui/tailwind.config.js
+++ b/ui/tailwind.config.js
@@ -0,0 +1,153 @@
+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 {
+  content: ["./src/**/*.{ts,tsx,svg}", "./index.html"],
+  darkMode: "selector",
+  theme: {
+    extend: {
+      gridTemplateRows: {
+        layout: "auto 1fr auto",
+        headerBody: "auto 1fr",
+        bodyFooter: "1fr auto",
+      },
+      gridTemplateColumns: {
+        sidebar: "1fr minmax(360px, 25%)",
+      },
+      screens: {
+        xs: "480px",
+        "2xl": "1440px",
+        "3xl": "1920px",
+        "4xl": "2560px",
+      },
+      fontFamily: {
+        sans: ["Circular", ...defaultTheme.fontFamily.sans],
+        display: ["Circular", ...defaultTheme.fontFamily.sans],
+        mono: ["Source Code Pro Variable", ...defaultTheme.fontFamily.mono],
+      },
+      maxWidth: {
+        "8xl": "88rem",
+        "9xl": "96rem",
+        "10xl": "104rem",
+        "11xl": "112rem",
+        "12xl": "120rem",
+      },
+      animation: {
+        enter: "enter .2s ease-out",
+        leave: "leave .15s ease-in forwards",
+        fadeInScale: "fadeInScale 1s ease-out forwards",
+        fadeInScaleFloat:
+          "fadeInScaleFloat 1s ease-out forwards, float 3s ease-in-out infinite",
+        fadeIn: "fadeIn 1s ease-out forwards",
+        slideUpFade: "slideUpFade 1s ease-out forwards",
+      },
+      animationDelay: {
+        1000: "1000ms",
+        1500: "1500ms",
+      },
+      keyframes: {
+        enter: {
+          "0%": {
+            opacity: "0",
+            transform: "scale(.9)",
+          },
+          "100%": {
+            opacity: "1",
+            transform: "scale(1)",
+          },
+        },
+        leave: {
+          "0%": {
+            opacity: "1",
+            transform: "scale(1)",
+          },
+          "100%": {
+            opacity: "0",
+            transform: "scale(.9)",
+          },
+        },
+        fadeInScale: {
+          "0%": { opacity: "0", transform: "scale(0.98)" },
+          "100%": { opacity: "1", transform: "scale(1)" },
+        },
+        fadeInScaleFloat: {
+          "0%": { opacity: "0", transform: "scale(0.98) translateY(10px)" },
+          "100%": { opacity: "1", transform: "scale(1) translateY(0)" },
+        },
+        float: {
+          "0%, 100%": { transform: "translateY(0)" },
+          "50%": { transform: "translateY(-10px)" },
+        },
+        fadeIn: {
+          "0%": { opacity: "0", transform: "translateY(10px)" },
+          "70%": { opacity: "0.8", transform: "translateY(1px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" },
+        },
+        slideUpFade: {
+          "0%": { opacity: "0", transform: "translateY(20px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" },
+        },
+      },
+    },
+  },
+  plugins: [
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/typography"),
+    require("@headlessui/tailwindcss"),
+    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",
+        },
+      );
+    },
+    function ({ addUtilities, theme }) {
+      const animationDelays = theme("animationDelay");
+      const utilities = Object.entries(animationDelays).map(([key, value]) => ({
+        [`.animation-delay-${key}`]: { animationDelay: value },
+      }));
+      addUtilities(utilities);
+    },
+  ],
+};