feat: background gradients to project settings

3 files changed, 306 insertions, 0 deletions

diff --git a/apps/web/src/data/colors/pattern-craft.ts b/apps/web/src/data/colors/pattern-craft.ts
new file mode 100644
index 00000000..56c49b34
--- /dev/null
+++ b/apps/web/src/data/colors/pattern-craft.ts
@@ -0,0 +1,30 @@
+// These are the gradients from Pattern Craft (https://patterncraft.fun/)
+
+export const patternCraftGradients = [
+  // Dreamy Sky Pink Glow
+  "radial-gradient(circle at 30% 70%, rgba(173, 216, 230, 0.35), transparent 60%), radial-gradient(circle at 70% 30%, rgba(255, 182, 193, 0.4), transparent 60%)",
+
+  // Soft Warm Pastel Texture
+  "radial-gradient(circle at 20% 80%, rgba(255, 182, 153, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 244, 214, 0.5) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(255, 182, 153, 0.1) 0%, transparent 50%), #fff8f0",
+
+  // Warm Soft Coral & Cream
+  "radial-gradient(circle at 20% 80%, rgba(255, 160, 146, 0.25) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 244, 228, 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(255, 160, 146, 0.15) 0%, transparent 50%), #fef9f7",
+
+  // Soft Green Glow
+  "radial-gradient(circle at center, #8FFFB0, transparent), white",
+
+  // Purple Glow Right
+  "radial-gradient(circle at top right, rgba(173, 109, 244, 0.5), transparent 70%)",
+
+  // Teal Glow Right
+  "radial-gradient(circle at top right, rgba(56, 193, 182, 0.5), transparent 70%)",
+
+  // Warm Orange Glow Right
+  "radial-gradient(circle at top right, rgba(255, 140, 60, 0.5), transparent 70%)",
+
+  // Cool Blue Glow Right
+  "radial-gradient(circle at top right, rgba(70, 130, 180, 0.5), transparent 70%)",
+
+  // Purple Glow Left
+  "radial-gradient(circle at top left, rgba(173, 109, 244, 0.5), transparent 70%)",
+];
diff --git a/apps/web/src/data/colors/solid.ts b/apps/web/src/data/colors/solid.ts
new file mode 100644
index 00000000..9a12a587
--- /dev/null
+++ b/apps/web/src/data/colors/solid.ts
@@ -0,0 +1,244 @@
+export const colors = [
+  "#ffffff",
+  "#000000",
+  "#ffe2e2",
+  "#ffc9c9",
+  "#ffa2a2",
+  "#ff6467",
+  "#fb2c36",
+  "#e7000b",
+  "#c10007",
+  "#9f0712",
+  "#82181a",
+  "#460809",
+  "#fff7ed",
+  "#ffedd4",
+  "#ffd6a7",
+  "#ffb86a",
+  "#ff8904",
+  "#ff6900",
+  "#f54900",
+  "#ca3500",
+  "#9f2d00",
+  "#7e2a0c",
+  "#441306",
+  "#fffbeb",
+  "#fef3c6",
+  "#fee685",
+  "#ffd230",
+  "#ffb900",
+  "#fe9a00",
+  "#e17100",
+  "#bb4d00",
+  "#973c00",
+  "#7b3306",
+  "#461901",
+  "#fefce8",
+  "#fef9c2",
+  "#fff085",
+  "#ffdf20",
+  "#fdc700",
+  "#f0b100",
+  "#d08700",
+  "#a65f00",
+  "#894b00",
+  "#733e0a",
+  "#432004",
+  "#f7fee7",
+  "#ecfcca",
+  "#d8f999",
+  "#bbf451",
+  "#9ae600",
+  "#7ccf00",
+  "#5ea500",
+  "#497d00",
+  "#3c6300",
+  "#35530e",
+  "#192e03",
+  "#f0fdf4",
+  "#dcfce7",
+  "#b9f8cf",
+  "#7bf1a8",
+  "#05df72",
+  "#00c950",
+  "#00a63e",
+  "#008236",
+  "#016630",
+  "#0d542b",
+  "#032e15",
+  "#ecfdf5",
+  "#d0fae5",
+  "#a4f4cf",
+  "#5ee9b5",
+  "#00d492",
+  "#00bc7d",
+  "#009966",
+  "#007a55",
+  "#006045",
+  "#004f3b",
+  "#002c22",
+  "#f0fdfa",
+  "#cbfbf1",
+  "#96f7e4",
+  "#46ecd5",
+  "#00d5be",
+  "#00bba7",
+  "#009689",
+  "#00786f",
+  "#005f5a",
+  "#0b4f4a",
+  "#022f2e",
+  "#ecfeff",
+  "#cefafe",
+  "#a2f4fd",
+  "#53eafd",
+  "#00d3f2",
+  "#00b8db",
+  "#0092b8",
+  "#007595",
+  "#005f78",
+  "#104e64",
+  "#053345",
+  "#f0f9ff",
+  "#dff2fe",
+  "#b8e6fe",
+  "#74d4ff",
+  "#00bcff",
+  "#00a6f4",
+  "#0084d1",
+  "#0069a8",
+  "#00598a",
+  "#024a70",
+  "#052f4a",
+  "#eff6ff",
+  "#dbeafe",
+  "#bedbff",
+  "#8ec5ff",
+  "#51a2ff",
+  "#2b7fff",
+  "#155dfc",
+  "#1447e6",
+  "#193cb8",
+  "#1c398e",
+  "#162456",
+  "#eef2ff",
+  "#e0e7ff",
+  "#c6d2ff",
+  "#a3b3ff",
+  "#7c86ff",
+  "#615fff",
+  "#4f39f6",
+  "#432dd7",
+  "#372aac",
+  "#312c85",
+  "#1e1a4d",
+  "#f5f3ff",
+  "#ede9fe",
+  "#ddd6ff",
+  "#c4b4ff",
+  "#a684ff",
+  "#8e51ff",
+  "#7f22fe",
+  "#7008e7",
+  "#5d0ec0",
+  "#4d179a",
+  "#2f0d68",
+  "#faf5ff",
+  "#f3e8ff",
+  "#e9d4ff",
+  "#dab2ff",
+  "#c27aff",
+  "#ad46ff",
+  "#9810fa",
+  "#8200db",
+  "#6e11b0",
+  "#59168b",
+  "#3c0366",
+  "#fdf4ff",
+  "#fae8ff",
+  "#f6cfff",
+  "#f4a8ff",
+  "#ed6aff",
+  "#e12afb",
+  "#c800de",
+  "#a800b7",
+  "#8a0194",
+  "#721378",
+  "#4b004f",
+  "#fdf2f8",
+  "#fce7f3",
+  "#fccee8",
+  "#fda5d5",
+  "#fb64b6",
+  "#f6339a",
+  "#e60076",
+  "#c6005c",
+  "#a3004c",
+  "#861043",
+  "#510424",
+  "#fff1f2",
+  "#ffe4e6",
+  "#ffccd3",
+  "#ffa1ad",
+  "#ff637e",
+  "#ff2056",
+  "#ec003f",
+  "#c70036",
+  "#a50036",
+  "#8b0836",
+  "#4d0218",
+  "#f8fafc",
+  "#f1f5f9",
+  "#e2e8f0",
+  "#cad5e2",
+  "#90a1b9",
+  "#62748e",
+  "#45556c",
+  "#314158",
+  "#1d293d",
+  "#0f172b",
+  "#020618",
+  "#f9fafb",
+  "#f3f4f6",
+  "#e5e7eb",
+  "#d1d5dc",
+  "#99a1af",
+  "#6a7282",
+  "#4a5565",
+  "#364153",
+  "#1e2939",
+  "#101828",
+  "#030712",
+  "#fafafa",
+  "#f4f4f5",
+  "#e4e4e7",
+  "#d4d4d8",
+  "#9f9fa9",
+  "#71717b",
+  "#52525c",
+  "#3f3f46",
+  "#27272a",
+  "#18181b",
+  "#09090b",
+  "#f5f5f5",
+  "#e5e5e5",
+  "#d4d4d4",
+  "#a1a1a1",
+  "#737373",
+  "#525252",
+  "#404040",
+  "#262626",
+  "#171717",
+  "#0a0a0a",
+  "#fafaf9",
+  "#f5f5f4",
+  "#e7e5e4",
+  "#d6d3d1",
+  "#a6a09b",
+  "#79716b",
+  "#57534d",
+  "#44403b",
+  "#292524",
+  "#1c1917",
+  "#0c0a09",
+];
diff --git a/apps/web/src/data/colors/syntax-ui.tsx b/apps/web/src/data/colors/syntax-ui.tsx
new file mode 100644
index 00000000..6a7677b4
--- /dev/null
+++ b/apps/web/src/data/colors/syntax-ui.tsx
@@ -0,0 +1,32 @@
+// These are the gradients from Syntax UI (https://syntaxui.com/effects/gradients)

+

+export const syntaxUIGradients = [

+  // Cyan to Blue gradients

+  "linear-gradient(to right, #22d3ee, #0ea5e9, #0284c7)",

+  "linear-gradient(to right, #bfdbfe, #a5f3fc)",

+  "linear-gradient(to right, #22d3ee, #0ea5e9, #0284c7)",

+

+  // Purple gradients

+  "linear-gradient(to right, #e9d5ff, #d8b4fe, #c084fc)",

+  "linear-gradient(to right, #c4b5fd, #a78bfa, #8b5cf6)",

+

+  // Blue gradients

+  "linear-gradient(to right, #93c5fd, #60a5fa, #3b82f6)",

+  "linear-gradient(to right, #93c5fd, #60a5fa, #3b82f6)",

+

+  // Green gradients

+  "linear-gradient(to right, #6ee7b7, #34d399, #10b981)",

+  "linear-gradient(to right, #d1fae5, #a7f3d0, #6ee7b7)",

+

+  // Red gradient

+  "linear-gradient(to right, #fca5a5, #f87171, #ef4444)",

+

+  // Yellow/Orange gradient

+  "linear-gradient(to right, #fde68a, #fbbf24, #f59e0b)",

+

+  // Pink gradient

+  "linear-gradient(to right, #fbcfe8, #f9a8d4, #f472b6)",

+

+  // Neon radial gradient

+  "radial-gradient(circle at bottom left, #ff00ff, #00ffff)",

+];