@syscore/ui-library 1.1.10 → 1.1.12

package/client/ui/Colors.stories.tsx

@@ -0,0 +1,1041 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Review/Colors",
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Color swatch component
+const ColorSwatch = ({
+  name,
+  color,
+  shade,
+  className,
+  width = "62px",
+}: {
+  name: string;
+  color: string;
+  shade?: string;
+  className?: string;
+  width?: string;
+}) => {
+  return (
+    <div className="flex flex-col" style={{ width }}>
+      <div
+        className={`w-[62px] h-[62px] rounded-md border border-gray-200 ${className || ""}`}
+        style={{ backgroundColor: color }}
+      />
+      <div className="min-h-[20px] px-1 flex flex-col items-center justify-center">
+        <span className="text-xs text-gray-600 text-center">
+          {shade || name}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+// Color row component
+const ColorRow = ({
+  label,
+  colors,
+  swatchWidth,
+}: {
+  label: string;
+  colors: Array<{
+    name: string;
+    color: string;
+    shade?: string;
+    className?: string;
+  }>;
+  swatchWidth?: string;
+}) => {
+  return (
+    <div className="flex gap-4 mb-6">
+      <div className="w-[200px] flex items-start pt-1">
+        <span className="text-sm font-medium text-gray-900">{label}</span>
+      </div>
+      <div className="flex gap-4 flex-1">
+        {colors.map((color) => (
+          <ColorSwatch
+            key={color.name}
+            name={color.name}
+            color={color.color}
+            shade={color.shade}
+            className={color.className}
+            width={swatchWidth}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+// Section header component
+const SectionHeader = ({ title }: { title: string }) => {
+  return (
+    <div className="mb-8">
+      <h2 className="text-2xl font-semibold mb-1">{title}</h2>
+      <div className="h-px bg-gray-200" />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: () => {
+    // Color definitions from CSS (matching global.css)
+    const paletteColors = [
+      {
+        label: "Generic",
+        colors: [
+          {
+            name: "white",
+            color: "#FFFFFF",
+            shade: "00",
+            className: "bg-white",
+          },
+          {
+            name: "black",
+            color: "#000000",
+            shade: "100",
+            className: "bg-black",
+          },
+        ],
+      },
+      {
+        label: "Gray",
+        colors: [
+          {
+            name: "gray-50",
+            color: "#f9f9fa",
+            shade: "50",
+            className: "bg-gray-50",
+          },
+          {
+            name: "gray-100",
+            color: "#eff1f2",
+            shade: "100",
+            className: "bg-gray-100",
+          },
+          {
+            name: "gray-200",
+            color: "#dedfe3",
+            shade: "200",
+            className: "bg-gray-200",
+          },
+          {
+            name: "gray-300",
+            color: "#cbcdd2",
+            shade: "300",
+            className: "bg-gray-300",
+          },
+          {
+            name: "gray-400",
+            color: "#9fa2ab",
+            shade: "400",
+            className: "bg-gray-400",
+          },
+          {
+            name: "gray-500",
+            color: "#71747d",
+            shade: "500",
+            className: "bg-gray-500",
+          },
+          {
+            name: "gray-600",
+            color: "#52545d",
+            shade: "600",
+            className: "bg-gray-600",
+          },
+          {
+            name: "gray-700",
+            color: "#3e4049",
+            shade: "700",
+            className: "bg-gray-700",
+          },
+          {
+            name: "gray-800",
+            color: "#282a31",
+            shade: "800",
+            className: "bg-gray-800",
+          },
+          {
+            name: "gray-900",
+            color: "#171820",
+            shade: "900",
+            className: "bg-gray-900",
+          },
+        ],
+      },
+      {
+        label: "Blue",
+        colors: [
+          {
+            name: "blue-50",
+            color: "#fbfdfe",
+            shade: "50",
+            className: "bg-blue-50",
+          },
+          {
+            name: "blue-100",
+            color: "#eff5fb",
+            shade: "100",
+            className: "bg-blue-100",
+          },
+          {
+            name: "blue-200",
+            color: "#cbe0f1",
+            shade: "200",
+            className: "bg-blue-200",
+          },
+          {
+            name: "blue-300",
+            color: "#a3c8e6",
+            shade: "300",
+            className: "bg-blue-300",
+          },
+          {
+            name: "blue-400",
+            color: "#72abd9",
+            shade: "400",
+            className: "bg-blue-400",
+          },
+          {
+            name: "blue-500",
+            color: "#3481c1",
+            shade: "500",
+            className: "bg-blue-500",
+          },
+          {
+            name: "blue-600",
+            color: "#2e74ad",
+            shade: "600",
+            className: "bg-blue-600",
+          },
+          {
+            name: "blue-700",
+            color: "#286495",
+            shade: "700",
+            className: "bg-blue-700",
+          },
+          {
+            name: "blue-800",
+            color: "#22547d",
+            shade: "800",
+            className: "bg-blue-800",
+          },
+          {
+            name: "blue-900",
+            color: "#183b58",
+            shade: "900",
+            className: "bg-blue-900",
+          },
+        ],
+      },
+      {
+        label: "Cyan",
+        colors: [
+          {
+            name: "cyan-50",
+            color: "#fafeff",
+            shade: "50",
+            className: "bg-cyan-50",
+          },
+          {
+            name: "cyan-100",
+            color: "#d6f4fb",
+            shade: "100",
+            className: "bg-cyan-100",
+          },
+          {
+            name: "cyan-200",
+            color: "#95e2f4",
+            shade: "200",
+            className: "bg-cyan-200",
+          },
+          {
+            name: "cyan-300",
+            color: "#39c9ea",
+            shade: "300",
+            className: "bg-cyan-300",
+          },
+          {
+            name: "cyan-400",
+            color: "#18bde2",
+            shade: "400",
+            className: "bg-cyan-400",
+          },
+          {
+            name: "cyan-500",
+            color: "#16adcf",
+            shade: "500",
+            className: "bg-cyan-500",
+          },
+          {
+            name: "cyan-600",
+            color: "#149ebd",
+            shade: "600",
+            className: "bg-cyan-600",
+          },
+          {
+            name: "cyan-700",
+            color: "#128ba6",
+            shade: "700",
+            className: "bg-cyan-700",
+          },
+          {
+            name: "cyan-800",
+            color: "#0f748a",
+            shade: "800",
+            className: "bg-cyan-800",
+          },
+          {
+            name: "cyan-900",
+            color: "#0a5161",
+            shade: "900",
+            className: "bg-cyan-900",
+          },
+        ],
+      },
+      {
+        label: "Emerald",
+        colors: [
+          {
+            name: "emerald-50",
+            color: "#fbfefe",
+            shade: "50",
+            className: "bg-emerald-50",
+          },
+          {
+            name: "emerald-100",
+            color: "#e0fbf5",
+            shade: "100",
+            className: "bg-emerald-100",
+          },
+          {
+            name: "emerald-200",
+            color: "#bcf6ea",
+            shade: "200",
+            className: "bg-emerald-200",
+          },
+          {
+            name: "emerald-300",
+            color: "#8aefdb",
+            shade: "300",
+            className: "bg-emerald-300",
+          },
+          {
+            name: "emerald-400",
+            color: "#50e7ca",
+            shade: "400",
+            className: "bg-emerald-400",
+          },
+          {
+            name: "emerald-500",
+            color: "#1dd7b2",
+            shade: "500",
+            className: "bg-emerald-500",
+          },
+          {
+            name: "emerald-600",
+            color: "#1bc5a3",
+            shade: "600",
+            className: "bg-emerald-600",
+          },
+          {
+            name: "emerald-700",
+            color: "#17aa8d",
+            shade: "700",
+            className: "bg-emerald-700",
+          },
+          {
+            name: "emerald-800",
+            color: "#138b73",
+            shade: "800",
+            className: "bg-emerald-800",
+          },
+          {
+            name: "emerald-900",
+            color: "#0e6352",
+            shade: "900",
+            className: "bg-emerald-900",
+          },
+        ],
+      },
+      {
+        label: "Plum",
+        colors: [
+          {
+            name: "plum-50",
+            color: "#fdfcfd",
+            shade: "50",
+            className: "bg-plum-50",
+          },
+          {
+            name: "plum-100",
+            color: "#f7f2f6",
+            shade: "100",
+            className: "bg-plum-100",
+          },
+          {
+            name: "plum-200",
+            color: "#f0e1ed",
+            shade: "200",
+            className: "bg-plum-200",
+          },
+          {
+            name: "plum-300",
+            color: "#e8cae1",
+            shade: "300",
+            className: "bg-plum-300",
+          },
+          {
+            name: "plum-400",
+            color: "#dcadd2",
+            shade: "400",
+            className: "bg-plum-400",
+          },
+          {
+            name: "plum-500",
+            color: "#bf78ae",
+            shade: "500",
+            className: "bg-plum-500",
+          },
+          {
+            name: "plum-600",
+            color: "#aa6a9b",
+            shade: "600",
+            className: "bg-plum-600",
+          },
+          {
+            name: "plum-700",
+            color: "#905c84",
+            shade: "700",
+            className: "bg-plum-700",
+          },
+          {
+            name: "plum-800",
+            color: "#7f5075",
+            shade: "800",
+            className: "bg-plum-800",
+          },
+          {
+            name: "plum-900",
+            color: "#633e5a",
+            shade: "900",
+            className: "bg-plum-900",
+          },
+        ],
+      },
+      {
+        label: "Coral",
+        colors: [
+          {
+            name: "coral-50",
+            color: "#fefcfb",
+            shade: "50",
+            className: "bg-coral-50",
+          },
+          {
+            name: "coral-100",
+            color: "#fcf4f2",
+            shade: "100",
+            className: "bg-coral-100",
+          },
+          {
+            name: "coral-200",
+            color: "#f8dfd8",
+            shade: "200",
+            className: "bg-coral-200",
+          },
+          {
+            name: "coral-300",
+            color: "#f4c9be",
+            shade: "300",
+            className: "bg-coral-300",
+          },
+          {
+            name: "coral-400",
+            color: "#f0aa99",
+            shade: "400",
+            className: "bg-coral-400",
+          },
+          {
+            name: "coral-500",
+            color: "#ed896f",
+            shade: "500",
+            className: "bg-coral-500",
+          },
+          {
+            name: "coral-600",
+            color: "#e67357",
+            shade: "600",
+            className: "bg-coral-600",
+          },
+          {
+            name: "coral-700",
+            color: "#dc5432",
+            shade: "700",
+            className: "bg-coral-700",
+          },
+          {
+            name: "coral-800",
+            color: "#bc4324",
+            shade: "800",
+            className: "bg-coral-800",
+          },
+          {
+            name: "coral-900",
+            color: "#81311d",
+            shade: "900",
+            className: "bg-coral-900",
+          },
+        ],
+      },
+      {
+        label: "Pink",
+        colors: [
+          {
+            name: "pink-50",
+            color: "#fefbfb",
+            shade: "50",
+            className: "bg-pink-50",
+          },
+          {
+            name: "pink-100",
+            color: "#fceeef",
+            shade: "100",
+            className: "bg-pink-100",
+          },
+          {
+            name: "pink-200",
+            color: "#f7d4d8",
+            shade: "200",
+            className: "bg-pink-200",
+          },
+          {
+            name: "pink-300",
+            color: "#f2b4bb",
+            shade: "300",
+            className: "bg-pink-300",
+          },
+          {
+            name: "pink-400",
+            color: "#efa4ad",
+            shade: "400",
+            className: "bg-pink-400",
+          },
+          {
+            name: "pink-500",
+            color: "#eb8e99",
+            shade: "500",
+            className: "bg-pink-500",
+          },
+          {
+            name: "pink-600",
+            color: "#e77481",
+            shade: "600",
+            className: "bg-pink-600",
+          },
+          {
+            name: "pink-700",
+            color: "#e25566",
+            shade: "700",
+            className: "bg-pink-700",
+          },
+          {
+            name: "pink-800",
+            color: "#c92e3f",
+            shade: "800",
+            className: "bg-pink-800",
+          },
+          {
+            name: "pink-900",
+            color: "#9d1b2a",
+            shade: "900",
+            className: "bg-pink-900",
+          },
+        ],
+      },
+      {
+        label: "Bronze",
+        colors: [
+          {
+            name: "bronze-50",
+            color: "#fefdfb",
+            shade: "50",
+            className: "bg-bronze-50",
+          },
+          {
+            name: "bronze-100",
+            color: "#fbf8f3",
+            shade: "100",
+            className: "bg-bronze-100",
+          },
+          {
+            name: "bronze-200",
+            color: "#f8f1e8",
+            shade: "200",
+            className: "bg-bronze-200",
+          },
+          {
+            name: "bronze-300",
+            color: "#f3e7d8",
+            shade: "300",
+            className: "bg-bronze-300",
+          },
+          {
+            name: "bronze-400",
+            color: "#eedec9",
+            shade: "400",
+            className: "bg-bronze-400",
+          },
+          {
+            name: "bronze-500",
+            color: "#e8d2b5",
+            shade: "500",
+            className: "bg-bronze-500",
+          },
+          {
+            name: "bronze-600",
+            color: "#dcba8e",
+            shade: "600",
+            className: "bg-bronze-600",
+          },
+          {
+            name: "bronze-700",
+            color: "#d0a367",
+            shade: "700",
+            className: "bg-bronze-700",
+          },
+          {
+            name: "bronze-800",
+            color: "#bb833a",
+            shade: "800",
+            className: "bg-bronze-800",
+          },
+          {
+            name: "bronze-900",
+            color: "#845d29",
+            shade: "900",
+            className: "bg-bronze-900",
+          },
+        ],
+      },
+      {
+        label: "Silver",
+        colors: [
+          {
+            name: "silver-50",
+            color: "#fcfcfd",
+            shade: "50",
+            className: "bg-silver-50",
+          },
+          {
+            name: "silver-100",
+            color: "#f6f7f8",
+            shade: "100",
+            className: "bg-silver-100",
+          },
+          {
+            name: "silver-200",
+            color: "#edf0f2",
+            shade: "200",
+            className: "bg-silver-200",
+          },
+          {
+            name: "silver-300",
+            color: "#e2e5e9",
+            shade: "300",
+            className: "bg-silver-300",
+          },
+          {
+            name: "silver-400",
+            color: "#d6dbe0",
+            shade: "400",
+            className: "bg-silver-400",
+          },
+          {
+            name: "silver-500",
+            color: "#c8ced6",
+            shade: "500",
+            className: "bg-silver-500",
+          },
+          {
+            name: "silver-600",
+            color: "#bcc4cd",
+            shade: "600",
+            className: "bg-silver-600",
+          },
+          {
+            name: "silver-700",
+            color: "#a2adb9",
+            shade: "700",
+            className: "bg-silver-700",
+          },
+          {
+            name: "silver-800",
+            color: "#8190a1",
+            shade: "800",
+            className: "bg-silver-800",
+          },
+          {
+            name: "silver-900",
+            color: "#5c6a7b",
+            shade: "900",
+            className: "bg-silver-900",
+          },
+        ],
+      },
+      {
+        label: "Gold",
+        colors: [
+          {
+            name: "gold-50",
+            color: "#fefdfb",
+            shade: "50",
+            className: "bg-gold-50",
+          },
+          {
+            name: "gold-100",
+            color: "#fdfcf6",
+            shade: "100",
+            className: "bg-gold-100",
+          },
+          {
+            name: "gold-200",
+            color: "#f9f5e1",
+            shade: "200",
+            className: "bg-gold-200",
+          },
+          {
+            name: "gold-300",
+            color: "#f6efd0",
+            shade: "300",
+            className: "bg-gold-300",
+          },
+          {
+            name: "gold-400",
+            color: "#f2e8bb",
+            shade: "400",
+            className: "bg-gold-400",
+          },
+          {
+            name: "gold-500",
+            color: "#eee2aa",
+            shade: "500",
+            className: "bg-gold-500",
+          },
+          {
+            name: "gold-600",
+            color: "#eada94",
+            shade: "600",
+            className: "bg-gold-600",
+          },
+          {
+            name: "gold-700",
+            color: "#e5d27b",
+            shade: "700",
+            className: "bg-gold-700",
+          },
+          {
+            name: "gold-800",
+            color: "#cdae28",
+            shade: "800",
+            className: "bg-gold-800",
+          },
+          {
+            name: "gold-900",
+            color: "#917c1d",
+            shade: "900",
+            className: "bg-gold-900",
+          },
+        ],
+      },
+      {
+        label: "Platinum",
+        colors: [
+          {
+            name: "platinum-50",
+            color: "#fcfcfd",
+            shade: "50",
+            className: "bg-platinum-50",
+          },
+          {
+            name: "platinum-100",
+            color: "#f7f7f8",
+            shade: "100",
+            className: "bg-platinum-100",
+          },
+          {
+            name: "platinum-200",
+            color: "#ececee",
+            shade: "200",
+            className: "bg-platinum-200",
+          },
+          {
+            name: "platinum-300",
+            color: "#e2e1e5",
+            shade: "300",
+            className: "bg-platinum-300",
+          },
+          {
+            name: "platinum-400",
+            color: "#d2d1d6",
+            shade: "400",
+            className: "bg-platinum-400",
+          },
+          {
+            name: "platinum-500",
+            color: "#c6c5cc",
+            shade: "500",
+            className: "bg-platinum-500",
+          },
+          {
+            name: "platinum-600",
+            color: "#b4b3bc",
+            shade: "600",
+            className: "bg-platinum-600",
+          },
+          {
+            name: "platinum-700",
+            color: "#9f9da9",
+            shade: "700",
+            className: "bg-platinum-700",
+          },
+          {
+            name: "platinum-800",
+            color: "#848291",
+            shade: "800",
+            className: "bg-platinum-800",
+          },
+          {
+            name: "platinum-900",
+            color: "#5d5b67",
+            shade: "900",
+            className: "bg-platinum-900",
+          },
+        ],
+      },
+      {
+        label: "Beige",
+        colors: [
+          {
+            name: "beige-50",
+            color: "#fdfcfc",
+            shade: "50",
+            className: "bg-beige-50",
+          },
+          {
+            name: "beige-100",
+            color: "#fbfaf9",
+            shade: "100",
+            className: "bg-beige-100",
+          },
+          {
+            name: "beige-200",
+            color: "#efeae6",
+            shade: "200",
+            className: "bg-beige-200",
+          },
+          {
+            name: "beige-300",
+            color: "#e2d7d0",
+            shade: "300",
+            className: "bg-beige-300",
+          },
+          {
+            name: "beige-400",
+            color: "#d2c2b6",
+            shade: "400",
+            className: "bg-beige-400",
+          },
+          {
+            name: "beige-500",
+            color: "#c1aa9a",
+            shade: "500",
+            className: "bg-beige-500",
+          },
+          {
+            name: "beige-600",
+            color: "#b59a87",
+            shade: "600",
+            className: "bg-beige-600",
+          },
+          {
+            name: "beige-700",
+            color: "#a5856e",
+            shade: "700",
+            className: "bg-beige-700",
+          },
+          {
+            name: "beige-800",
+            color: "#8b6c56",
+            shade: "800",
+            className: "bg-beige-800",
+          },
+          {
+            name: "beige-900",
+            color: "#685140",
+            shade: "900",
+            className: "bg-beige-900",
+          },
+        ],
+      },
+    ];
+
+    const conceptsColors = [
+      { name: "mind", color: "#0A5161" },
+      { name: "community", color: "#0F748A" },
+      { name: "movement", color: "#149EBD" },
+      { name: "water", color: "#39C9EA" },
+      { name: "air", color: "#87DFF2" },
+      { name: "light", color: "#8AEFDB" },
+      { name: "thermal-comfort", color: "#3EDDBF" },
+      { name: "nourishment", color: "#17AA8D" },
+      { name: "sound", color: "#0C705C" },
+      { name: "materials", color: "#0A4F41" },
+    ];
+
+    const ratingsColors = [
+      { name: "health-safety", color: "#72ABD9" },
+      { name: "performance", color: "#0F748A" },
+      { name: "equity", color: "#17AA8D" },
+      { name: "coworking", color: "#9A608C" },
+    ];
+
+    return (
+      <div className="min-h-screen bg-white p-16">
+        <div className="max-w-[1800px] mx-auto">
+          {/* Header */}
+          <div className="mb-16">
+            <h1 className="text-4xl font-bold">Colors</h1>
+          </div>
+
+          {/* Palette Section */}
+          <div className="mb-16">
+            <SectionHeader title="Palette" />
+            <div className="space-y-6">
+              {paletteColors.map((palette) => (
+                <ColorRow
+                  key={palette.label}
+                  label={palette.label}
+                  colors={palette.colors}
+                  swatchWidth="62px"
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Swatches Section */}
+          <div className="mb-16">
+            <SectionHeader title="Swatches" />
+            <div className="space-y-6">
+              {/* Concepts - Two rows */}
+              <div className="flex gap-4 mb-6">
+                <div className="w-[200px] flex items-start pt-1">
+                  <span className="text-sm font-medium text-gray-900">
+                    Concepts
+                  </span>
+                </div>
+                <div className="flex-1 space-y-4">
+                  {/* First row */}
+                  <div className="flex gap-4">
+                    {conceptsColors.slice(0, 5).map((color) => (
+                      <ColorSwatch
+                        key={color.name}
+                        name={color.name}
+                        color={color.color}
+                      />
+                    ))}
+                  </div>
+                  {/* Second row */}
+                  <div className="flex gap-4">
+                    {conceptsColors.slice(5, 10).map((color) => (
+                      <ColorSwatch
+                        key={color.name}
+                        name={color.name}
+                        color={color.color}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+              <ColorRow label="Ratings" colors={ratingsColors} />
+            </div>
+          </div>
+
+          {/* Gradients Section */}
+          <div>
+            <SectionHeader title="Gradients" />
+            <div className="space-y-6">
+              <div className="flex gap-4 mb-6">
+                <div className="w-[200px] flex items-start pt-1">
+                  <span className="text-sm font-medium text-gray-900">
+                    Backdrops
+                  </span>
+                </div>
+                <div className="flex-1 space-y-4">
+                  <div className="flex flex-col">
+                    <div
+                      className="h-[62px] rounded-md border border-gray-200"
+                      style={{
+                        background: `linear-gradient(99deg, #41d5f6 3.39%, #3eecd1 57.86%, #66fcd9 112.32%)`,
+                      }}
+                    />
+                    <div className="min-h-[20px] px-1 flex flex-col items-center justify-center">
+                      <span className="text-xs text-gray-600 text-center">
+                        gradient 01
+                      </span>
+                    </div>
+                  </div>
+                  <div className="flex flex-col">
+                    <div
+                      className="h-[62px] rounded-md border border-gray-200"
+                      style={{
+                        background: `linear-gradient(58deg, #8aefdb 2.8%, #d4bace 41.67%, #cbe0f1 80.55%)`,
+                      }}
+                    />
+                    <div className="min-h-[20px] px-1 flex flex-col items-center justify-center">
+                      <span className="text-xs text-gray-600 text-center">
+                        gradient 02
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="flex gap-4 mb-6">
+                <div className="w-[200px] flex items-start pt-1">
+                  <span className="text-sm font-medium text-gray-900">
+                    Performance
+                  </span>
+                </div>
+                <div className="flex-1">
+                  <div className="flex flex-col">
+                    <div
+                      className="h-[62px] rounded-md border border-gray-200"
+                      style={{
+                        background: `linear-gradient(180deg, #1dd7b2 0%, #18bde2 50%, #bf78ae 75%, #e67357 100%)`,
+                      }}
+                    />
+                    <div className="min-h-[20px] px-1 flex flex-col items-center justify-center">
+                      <span className="text-xs text-gray-600 text-center">
+                        gradient 01
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};