✨ feat: Add tailwind and cloudflare support

2025-12-12 08:45:38 +02:00 · 2024-08-30 10:22:10 +03:00
parent 81fc5e8f85
commit fd16947e14
21 changed files with 558 additions and 24 deletions
--- a/packages/ui/tailwind.config.js
+++ b/packages/ui/tailwind.config.js
@@ -0,0 +1,134 @@
+import colors from "tailwindcss/colors";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './{src,components,app}/**/*.{ts,tsx,html}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: "#FFEDE5",
+          100: "#FFDBCC",
+          200: "#FFB899",
+          300: "#FF9466",
+          400: "#FF7033",
+          500: "#FF4F01",
+          600: "#CC3D00",
+          700: "#992E00",
+          800: "#661F00",
+          900: "#330F00",
+          950: "#190800",
+          DEFAULT: "#FF4F01"
+        },
+        secondary: colors.orange,
+        accent: colors.amber,
+        gray: {
+          ...colors.neutral,
+          925: "#111111",
+        },
+        danger: colors.red,
+        warning: colors.yellow,
+        success: colors.green,
+        info: colors.blue,
+      },
+      fontFamily: {
+        body: [
+          "Geist Sans",
+          "ui-sans-serif",
+          "system-ui",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Inter",
+          "Segoe UI",
+          "Roboto",
+          "sans-serif",
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji",
+        ],
+        title: [
+          "Bricolage Grotesque",
+          "-apple-system",
+          "blinkmacsystemfont",
+          "segoe ui",
+          "roboto",
+          "oxygen",
+          "ubuntu",
+          "cantarell",
+          "fira",
+          "sans",
+          "droid sans",
+          "helvetica neue",
+          "sans-serif",
+        ]
+      },
+      boxShadow: {
+        "shadow-floating-light": "0px 6px 12px 0px rgba(99,99,99,.06),0px 22px 22px 0px rgba(99,99,99,.05),0px 50px 30px 0px rgba(99,99,99,.03),0px 89px 36px 0px rgba(99,99,99,.01),0px 140px 39px 0px rgba(99,99,99,0)",
+        "inner-shadow-dark-float": "0px 1px 0px 0px hsla(0,0%,100%,.03) inset,0px 0px 0px 1px hsla(0,0%,100%,.03) inset,0px 0px 0px 1px rgba(0,0,0,.1),0px 2px 2px 0px rgba(0,0,0,.1),0px 4px 4px 0px rgba(0,0,0,.1),0px 8px 8px 0px rgba(0,0,0,.1)",
+        "fullscreen": "0 0 0 1px rgba(0,0,0,.08),0px 1px 1px rgba(0,0,0,.02),0px 8px 16px -4px rgba(0,0,0,.04),0px 24px 32px -8px rgba(0,0,0,.06)",
+        "menu": "0 0 0 1px rgba(0,0,0,.08),0px 1px 1px rgba(0,0,0,.02),0px 4px 8px -4px rgba(0,0,0,.04),0px 16px 24px -8px rgba(0,0,0,.06)",
+      },
+      keyframes: {
+        "fade-up": {
+          "0%": {
+            opacity: "0",
+            transform: "translateY(10px)",
+          },
+          "80%": {
+            opacity: "0.7",
+          },
+          "100%": {
+            opacity: "1",
+            transform: "translateY(0px)",
+          },
+        },
+        "fade-down": {
+          "0%": {
+            opacity: "0",
+            transform: "translateY(-10px)",
+          },
+          "80%": {
+            opacity: "0.6",
+          },
+          "100%": {
+            opacity: "1",
+            transform: "translateY(0px)",
+          },
+        },
+        shake: {
+          "25%": {
+            translate: "0.25ch 0"
+          },
+          "75%": {
+            translate: "-0.25ch 0"
+          }
+        },
+        slide: {
+          "100%": {
+            translate: "var(--destination-x) var(--destination-y);",
+          },
+        },
+        "multicolor": {
+          "0%": {
+            transform: "translateX(0%)"
+          },
+          "100%": {
+            transform: "translateX(-50%)"
+          }
+        }
+      },
+      animation: {
+        // Fade up and down
+        "fade-up": "fade-up 0.5s",
+        "fade-down": "fade-down 0.5s",
+        "shake": "shake 0.075s 8",
+        "multicolor": "multicolor 5s linear 0s infinite"
+      },
+    },
+    plugins: []
+  }
+}
+