feat: WIP

tailwind.config.js

@@ -19,6 +19,31 @@ module.exports = {
     },
     extend: {
       colors: {
+        prowler: {
+          blue: {
+            midnight: "#030921",
+            pale: "#f3fcff",
+          },
+          grey: {
+            medium: "#353a4d",
+            light: "#868994",
+          },
+          theme: {
+            green: "#6af400",
+            purple: "#5001d0",
+            coral: "#ff5356",
+            orange: "#f69000",
+            yellow: "#ffdf16",
+          },
+          dark: {
+            title: "#E2E8F0",
+            text: "#94a3b8" /* primary default for dark mode */,
+          },
+          light: {
+            title: "#1e293bff",
+            text: "#64748b" /* primary default for light mode */,
+          },
+        },
         system: {
           success: {
             DEFAULT: "#09BF3D",
@@ -56,6 +81,47 @@ module.exports = {
         sans: ["var(--font-sans)"],
         mono: ["var(--font-geist-mono)"],
       },
+      boxShadow: {
+        "box-light":
+          "-16px -16px 40px rgba(255, 255, 255, 0.8), 16px 4px 64px rgba(18, 61, 101, 0.3), inset -8px -6px 80px rgba(255, 255, 255, 0.18)",
+        "button-curved-default":
+          "-4px -2px 16px rgba(255, 255, 255, 0.7), 4px 2px 16px rgba(136, 165, 191, 0.38)",
+        "button-curved-pressed":
+          "inset -4px -4px 16px rgba(255, 255, 255, 0.8), inset 4px 4px 12px rgba(136, 165, 191, 0.4)",
+        "button-flat-nopressed":
+          "-4px -2px 16px #FFFFFF, 4px 2px 16px rgba(136, 165, 191, 0.48)",
+        "button-flat-pressed":
+          "inset -3px -3px 7px #FFFFFF, inset 3px 3px 7px rgba(136, 165, 191, 0.48)",
+        "box-down-light":
+          "inset -3px -3px 7px #FFFFFF, inset 2px 2px 5px rgba(136, 165, 191, 0.38)",
+        "box-up":
+          "-4px -2px 16px #FFFFFF, 4px 2px 16px rgba(136, 165, 191, 0.54)",
+        "box-dark":
+          "-4px -2px 16px rgba(195, 200, 205, 0.09), 4px 4px 18px rgba(0, 0, 0, 0.5)",
+        "box-dark-out": "inset 2px 2px 2px rgba(26, 32, 38, 0.4)",
+        "buttons-box-dark":
+          "-5px -6px 16px rgba(195, 200, 205, 0.04), 22px 22px 60px rgba(0, 0, 0, 0.5)",
+        "button-curved-default-dark":
+          "-4px -4px 16px rgba(195, 200, 205, 0.06), 4px 4px 18px rgba(0, 0, 0, 0.6)",
+        "button-curved-pressed-dark":
+          "-4px -2px 16px rgba(195, 200, 205, 0.07), 4px 4px 18px rgba(0, 0, 0, 0.44)",
+        "sky-light":
+          "-16px 20px 40px rgba(215, 215, 215, 0.3), -2px 2px 24px rgba(22, 28, 47, 0.3), -16px 28px 120px rgba(0, 0, 0, 0.1)",
+        "midnight-dark":
+          "-16px 20px 40px rgba(3, 9, 33, 0.3), -2px 2px 24px rgba(3, 9, 33, 0.6), -16px 28px 120px rgba(3, 9, 33, 0.1)",
+        switcher:
+          "0px -6px 24px #FFFFFF, 0px 7px 16px rgba(104, 132, 157, 0.5)",
+        up: "0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff",
+        down: "inset 0.2rem 0.2rem 0.5rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #fff",
+      },
+      animation: {
+        "fade-in": "fade-in 200ms ease-out 0s 1 normal forwards running",
+        "fade-out": "fade-out 200ms ease-in 0s 1 normal forwards running",
+        expand: "expand 400ms linear 0s 1 normal forwards running",
+        "slide-in": "slide-in 400ms linear 0s 1 normal forwards running",
+        "slide-out": "slide-out 400ms linear 0s 1 normal forwards running",
+        collapse: "collapse 400ms linear 0s 1 normal forwards running",
+      },
       keyframes: {
         "accordion-down": {
           from: { height: "0" },