From 2c0423667cf3c8fedb194c7b34b5edd5657628f4 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sat, 2 Aug 2025 16:09:20 +0200
Subject: feat: background gradients to project settings

---
 apps/web/src/components/background-settings.tsx    |   2 +-
 .../editor/media-panel/views/settings.tsx          | 111 ++++++++--
 apps/web/src/components/editor/preview-panel.tsx   |   4 +-
 apps/web/src/data/colors.ts                        | 244 ---------------------
 apps/web/src/data/colors/pattern-craft.ts          |  30 +++
 apps/web/src/data/colors/solid.ts                  | 244 +++++++++++++++++++++
 apps/web/src/data/colors/syntax-ui.tsx             |  32 +++
 7 files changed, 396 insertions(+), 271 deletions(-)
 delete mode 100644 apps/web/src/data/colors.ts
 create mode 100644 apps/web/src/data/colors/pattern-craft.ts
 create mode 100644 apps/web/src/data/colors/solid.ts
 create mode 100644 apps/web/src/data/colors/syntax-ui.tsx

(limited to 'apps')

diff --git a/apps/web/src/components/background-settings.tsx b/apps/web/src/components/background-settings.tsx
index 7e27e574..0457cb05 100644
--- a/apps/web/src/components/background-settings.tsx
+++ b/apps/web/src/components/background-settings.tsx
@@ -3,7 +3,7 @@ import { Button } from "./ui/button";
 import { BackgroundIcon } from "./icons";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
-import { colors } from "@/data/colors";
+import { colors } from "@/data/colors/solid";
 import { useProjectStore } from "@/stores/project-store";
 import { PipetteIcon } from "lucide-react";
 
diff --git a/apps/web/src/components/editor/media-panel/views/settings.tsx b/apps/web/src/components/editor/media-panel/views/settings.tsx
index 8667b9d1..3bce1753 100644
--- a/apps/web/src/components/editor/media-panel/views/settings.tsx
+++ b/apps/web/src/components/editor/media-panel/views/settings.tsx
@@ -22,9 +22,11 @@ import { useEditorStore } from "@/stores/editor-store";
 import { useAspectRatio } from "@/hooks/use-aspect-ratio";
 import Image from "next/image";
 import { cn } from "@/lib/utils";
-import { colors } from "@/data/colors";
+import { colors } from "@/data/colors/solid";
+import { patternCraftGradients } from "@/data/colors/pattern-craft";
 import { PipetteIcon } from "lucide-react";
 import { useMemo, memo, useCallback } from "react";
+import { syntaxUIGradients } from "@/data/colors/syntax-ui";
 
 export function SettingsView() {
   return <ProjectSettingsTabs />;
@@ -137,8 +139,8 @@ const BlurPreview = memo(
   }) => (
     <div
       className={cn(
-        "w-full aspect-square rounded-sm cursor-pointer hover:outline-2 hover:outline-primary relative overflow-hidden",
-        isSelected && "outline-2 outline-primary"
+        "w-full aspect-square rounded-sm cursor-pointer border border-foreground/15 hover:border-primary relative overflow-hidden",
+        isSelected && "border-2 border-primary"
       )}
       onClick={onSelect}
     >
@@ -161,6 +163,57 @@ const BlurPreview = memo(
 
 BlurPreview.displayName = "BlurPreview";
 
+const BackgroundPreviews = memo(
+  ({
+    backgrounds,
+    currentBackgroundColor,
+    isColorBackground,
+    handleColorSelect,
+    useBackgroundColor = false,
+  }: {
+    backgrounds: string[];
+    currentBackgroundColor: string;
+    isColorBackground: boolean;
+    handleColorSelect: (bg: string) => void;
+    useBackgroundColor?: boolean;
+  }) => {
+    return useMemo(
+      () =>
+        backgrounds.map((bg) => (
+          <div
+            key={bg}
+            className={cn(
+              "w-full aspect-square rounded-sm cursor-pointer border border-foreground/15 hover:border-primary",
+              isColorBackground &&
+                bg === currentBackgroundColor &&
+                "border-2 border-primary"
+            )}
+            style={
+              useBackgroundColor
+                ? { backgroundColor: bg }
+                : {
+                    background: bg,
+                    backgroundSize: "cover",
+                    backgroundPosition: "center",
+                    backgroundRepeat: "no-repeat",
+                  }
+            }
+            onClick={() => handleColorSelect(bg)}
+          />
+        )),
+      [
+        backgrounds,
+        isColorBackground,
+        currentBackgroundColor,
+        handleColorSelect,
+        useBackgroundColor,
+      ]
+    );
+  }
+);
+
+BackgroundPreviews.displayName = "BackgroundPreviews";
+
 function BackgroundView() {
   const { activeProject, updateBackgroundType } = useProjectStore();
 
@@ -205,36 +258,46 @@ function BackgroundView() {
     [blurLevels, isBlurBackground, currentBlurIntensity, handleBlurSelect]
   );
 
-  const colorPreviews = useMemo(
-    () =>
-      colors.map((color) => (
-        <div
-          key={color}
-          className={cn(
-            "w-full aspect-square rounded-sm cursor-pointer hover:border-2 hover:border-primary",
-            isColorBackground &&
-              color === currentBackgroundColor &&
-              "border-2 border-primary"
-          )}
-          style={{ backgroundColor: color }}
-          onClick={() => handleColorSelect(color)}
-        />
-      )),
-    [isColorBackground, currentBackgroundColor, handleColorSelect]
-  );
-
   return (
     <div className="flex flex-col gap-5">
-      <PropertyGroup title="Blur">
+      <PropertyGroup title="Blur" defaultExpanded={false}>
         <div className="grid grid-cols-4 gap-2 w-full">{blurPreviews}</div>
       </PropertyGroup>
 
-      <PropertyGroup title="Colors">
+      <PropertyGroup title="Colors" defaultExpanded={false}>
         <div className="grid grid-cols-4 gap-2 w-full">
           <div className="w-full aspect-square rounded-sm cursor-pointer border border-foreground/15 hover:border-primary flex items-center justify-center">
             <PipetteIcon className="size-4" />
           </div>
-          {colorPreviews}
+          <BackgroundPreviews
+            backgrounds={colors}
+            currentBackgroundColor={currentBackgroundColor}
+            isColorBackground={isColorBackground}
+            handleColorSelect={handleColorSelect}
+            useBackgroundColor={true}
+          />
+        </div>
+      </PropertyGroup>
+
+      <PropertyGroup title="Pattern Craft" defaultExpanded={false}>
+        <div className="grid grid-cols-4 gap-2 w-full">
+          <BackgroundPreviews
+            backgrounds={patternCraftGradients}
+            currentBackgroundColor={currentBackgroundColor}
+            isColorBackground={isColorBackground}
+            handleColorSelect={handleColorSelect}
+          />
+        </div>
+      </PropertyGroup>
+
+      <PropertyGroup title="Syntax UI" defaultExpanded={false}>
+        <div className="grid grid-cols-4 gap-2 w-full">
+          <BackgroundPreviews
+            backgrounds={syntaxUIGradients}
+            currentBackgroundColor={currentBackgroundColor}
+            isColorBackground={isColorBackground}
+            handleColorSelect={handleColorSelect}
+          />
         </div>
       </PropertyGroup>
     </div>
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 3a962025..58cc5d5b 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -480,7 +480,7 @@ export function PreviewPanel() {
               style={{
                 width: previewDimensions.width,
                 height: previewDimensions.height,
-                backgroundColor:
+                background:
                   activeProject?.backgroundType === "blur"
                     ? "transparent"
                     : activeProject?.backgroundColor || "#000000",
@@ -742,7 +742,7 @@ function FullscreenPreview({
           style={{
             width: previewDimensions.width,
             height: previewDimensions.height,
-            backgroundColor:
+            background:
               activeProject?.backgroundType === "blur"
                 ? "#1a1a1a"
                 : activeProject?.backgroundColor || "#1a1a1a",
diff --git a/apps/web/src/data/colors.ts b/apps/web/src/data/colors.ts
deleted file mode 100644
index 9a12a587..00000000
--- a/apps/web/src/data/colors.ts
+++ /dev/null
@@ -1,244 +0,0 @@
-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/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)",
+];
-- 
cgit v1.3.1