tio-design-make-experiments 0.0.1

package/src/app/components/design-system/Cards.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import svgPaths from "../../../imports/svg-umftvfphsk";
+import { SectionHeader } from "./SectionHeader";
+import { CopyButton } from "./CopyButton";
+
+export function Cards() {
+  return (
+    <section>
+      <SectionHeader
+        title="Cards"
+        description="Card containers used for grouping related content"
+      />
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Basic Card */}
+        <div>
+          <p className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground uppercase tracking-wider mb-3">
+            Basic Card
+          </p>
+          <div className="group/card bg-card rounded-xl p-8 relative">
+            <div className="absolute top-2 right-2 opacity-0 group-hover/card:opacity-100 transition-opacity">
+              <CopyButton token="bg-card rounded-xl p-8" />
+            </div>
+            <p className="font-['Source_Sans_3',sans-serif] text-lg text-foreground uppercase" style={{ fontWeight: 300 }}>
+              Card Title
+            </p>
+            <div className="h-5" />
+            <p className="font-['Source_Sans_3',sans-serif] text-sm text-muted-foreground">
+              Card content goes here. Uses background #1D1D1D with 15px border radius and 30px padding.
+            </p>
+          </div>
+        </div>
+
+        {/* Card with Header */}
+        <div>
+          <p className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground uppercase tracking-wider mb-3">
+            Session Details Card
+          </p>
+          <div className="group/card bg-card rounded-xl p-8 relative">
+            <div className="absolute top-2 right-12 opacity-0 group-hover/card:opacity-100 transition-opacity z-10">
+              <CopyButton token="bg-card rounded-xl p-8 | header: text-lg uppercase | title: text-2xl" />
+            </div>
+            <div className="flex items-start justify-between">
+              <div>
+                <p className="font-['Source_Sans_3',sans-serif] text-lg text-foreground uppercase" style={{ fontWeight: 300 }}>
+                  Session Details
+                </p>
+                <div className="h-1" />
+                <p className="font-['Source_Sans_3',sans-serif] text-2xl text-foreground" style={{ fontWeight: 300 }}>
+                  Test session title
+                </p>
+              </div>
+              <button className="btn-icon">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                  <path d={svgPaths.p5e64f80} fill="currentColor" />
+                </svg>
+              </button>
+            </div>
+            <div className="h-4" />
+            <div className="flex flex-wrap gap-x-12 gap-y-2 text-muted-foreground">
+              <div className="flex gap-5 items-center">
+                <span className="font-['Source_Sans_3',sans-serif] text-xs uppercase" style={{ fontWeight: 600 }}>Created on:</span>
+                <span className="font-['Source_Sans_3',sans-serif] text-base">2025-07-23 19:11</span>
+              </div>
+              <div className="flex gap-5 items-center">
+                <span className="font-['Source_Sans_3',sans-serif] text-xs uppercase" style={{ fontWeight: 600 }}>Status:</span>
+                <span className="font-['Source_Sans_3',sans-serif] text-base text-foreground">draft</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* XL Buttons */}
+      <div className="mt-8">
+        <p className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground uppercase tracking-wider mb-3">
+          XL Buttons
+        </p>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Create New Session Card */}
+          <div className="group/card relative">
+            <button className="btn-xl-outline w-full">
+              <div className="pb-4">
+                <svg width="60" height="60" viewBox="0 0 60 60" fill="none">
+                  <g clipPath="url(#clip_plus_action)">
+                    <path d={svgPaths.p2455100} fill="currentColor" />
+                  </g>
+                  <defs>
+                    <clipPath id="clip_plus_action"><rect fill="white" height="60" width="60" /></clipPath>
+                  </defs>
+                </svg>
+              </div>
+              <span>Create New Test Session</span>
+            </button>
+            <div className="absolute top-2 right-2 opacity-0 group-hover/card:opacity-100 transition-opacity z-10">
+              <CopyButton token="btn-xl-outline" />
+            </div>
+          </div>
+
+          {/* Placeholder for other action cards */}
+          <div className="group/card relative">
+            <button className="btn-xl-filled w-full">
+              <div className="pb-4">
+                <svg width="60" height="60" viewBox="0 0 60 60" fill="none">
+                  <g clipPath="url(#clip_test_action)">
+                    <path d={svgPaths.p2af2dd00} fill="currentColor" />
+                  </g>
+                  <defs>
+                    <clipPath id="clip_test_action"><rect fill="white" height="60" width="60" /></clipPath>
+                  </defs>
+                </svg>
+              </div>
+              <span>Start test</span>
+            </button>
+            <div className="absolute top-2 right-2 opacity-0 group-hover/card:opacity-100 transition-opacity z-10">
+              <CopyButton token="btn-xl-filled" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/app/components/design-system/Charts.tsx

@@ -0,0 +1,135 @@
+import React from "react";
+import svgPaths from "../../../imports/svg-umftvfphsk";
+import { SectionHeader } from "./SectionHeader";
+import { CopyButton } from "./CopyButton";
+
+export function Charts() {
+  return (
+    <section>
+      <SectionHeader
+        title="Charts & Data Visualization"
+        description="Donut charts, line charts, and data nodes"
+      />
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Donut Chart */}
+        <div>
+          <p className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground uppercase tracking-wider mb-3">
+            Donut Chart (Large)
+          </p>
+          <div className="group/chart bg-card rounded-xl p-8 flex flex-col items-center relative">
+            <div className="absolute top-2 right-2 opacity-0 group-hover/chart:opacity-100 transition-opacity z-10">
+              <CopyButton token="donut: 180x180 | ring: var(--secondary) | segments: var(--chart-1/2/3) | center: text-6xl" />
+            </div>
+            <div className="relative size-[180px] flex items-center justify-center">
+              {/* Base ring */}
+              <svg className="absolute inset-0" viewBox="0 0 180 180" fill="none">
+                <path clipRule="evenodd" d={svgPaths.p3f48ef30} fill="var(--secondary)" fillRule="evenodd" />
+              </svg>
+              {/* Color segments */}
+              <svg className="absolute inset-0" viewBox="0 0 180 180" fill="none">
+                <mask height="180" id="mask_donut_demo" maskUnits="userSpaceOnUse" style={{ maskType: "alpha" }} width="180" x="0" y="0">
+                  <path clipRule="evenodd" d={svgPaths.p3f48ef30} fill="var(--secondary)" fillRule="evenodd" />
+                </mask>
+                <g mask="url(#mask_donut_demo)">
+                  <rect fill="var(--chart-2)" height="90" width="90" x="90" />
+                  <rect fill="var(--chart-3)" height="90" width="90" x="90" y="90" />
+                  <rect fill="var(--chart-1)" height="90" width="90" y="90" />
+                </g>
+              </svg>
+              {/* Center content */}
+              <div className="relative z-10 text-center">
+                <p className="font-['Source_Sans_3',sans-serif] text-6xl text-foreground leading-10" style={{ fontWeight: 300 }}>999</p>
+                <p className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground mt-2.5">Total check executions</p>
+              </div>
+            </div>
+            <div className="h-5" />
+            {/* Legend */}
+            <div className="flex gap-2.5 items-center justify-center">
+              {[
+                { color: "var(--chart-1)", label: "12 passed" },
+                { color: "var(--chart-2)", label: "12 failed" },
+                { color: "var(--chart-3)", label: "12 blocked" },
+              ].map((item) => (
+                <div key={item.label} className="flex items-center gap-1.5">
+                  <svg width="5" height="5" viewBox="0 0 5 5" fill="none">
+                    <circle cx="2.5" cy="2.5" r="2.5" fill={item.color} />
+                  </svg>
+                  <span className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground">{item.label}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Line Chart Data Points */}
+        <div>
+          <p className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground uppercase tracking-wider mb-3">
+            Line Chart Data Nodes
+          </p>
+          <div className="group/chart bg-card rounded-xl p-8 relative">
+            <div className="absolute top-2 right-2 opacity-0 group-hover/chart:opacity-100 transition-opacity z-10">
+              <CopyButton token="data-nodes: circle 10x10 | colors: var(--chart-1/2/3) | labels: text-xs text-muted-foreground" />
+            </div>
+            <p className="font-['Source_Sans_3',sans-serif] text-lg text-foreground uppercase mb-5" style={{ fontWeight: 300 }}>
+              Test Session Results
+            </p>
+            {/* Data columns */}
+            <div className="flex items-end justify-between px-4">
+              {[
+                { passed: 5, blocked: 3, failed: 0 },
+                { passed: 7, blocked: 4, failed: 2 },
+                { passed: 6, blocked: 4, failed: 0 },
+                { passed: 9, blocked: 3, failed: 2 },
+                { passed: 8, blocked: 3, failed: 0 },
+                { passed: 5, blocked: 4, failed: 0 },
+                { passed: 5, blocked: 4, failed: 0 },
+              ].map((col, i) => (
+                <div key={i} className="flex flex-col items-center gap-2">
+                  <div className="flex flex-col items-center gap-1">
+                    <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground">{col.passed}</span>
+                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+                      <circle cx="5" cy="5" r="5" fill="var(--chart-1)" />
+                    </svg>
+                  </div>
+                  <div className="flex flex-col items-center gap-1">
+                    <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground">{col.blocked}</span>
+                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+                      <circle cx="5" cy="5" r="5" fill="var(--chart-3)" />
+                    </svg>
+                  </div>
+                  <div className="flex flex-col items-center gap-1">
+                    <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground">{col.failed}</span>
+                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+                      <circle cx="5" cy="5" r="5" fill="var(--chart-2)" />
+                    </svg>
+                  </div>
+                  <div className="mt-2 text-center">
+                    <p className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground">19-09</p>
+                    <p className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground">10:00</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="h-5" />
+            {/* Legend */}
+            <div className="flex gap-2.5 items-center justify-center">
+              {[
+                { color: "var(--chart-5)", label: "passed" },
+                { color: "var(--chart-2)", label: "failed" },
+                { color: "var(--chart-3)", label: "blocked" },
+              ].map((item) => (
+                <div key={item.label} className="flex items-center gap-1.5">
+                  <svg width="5" height="5" viewBox="0 0 5 5" fill="none">
+                    <circle cx="2.5" cy="2.5" r="2.5" fill={item.color} />
+                  </svg>
+                  <span className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground">{item.label}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/app/components/design-system/ColorPalette.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { SectionHeader } from "./SectionHeader";
+import { CopyButton } from "./CopyButton";
+
+const colors = [
+  {
+    group: "Backgrounds",
+    items: [
+      { name: "Background", value: "#181818", css: "--background" },
+      { name: "Card", value: "#1D1D1D", css: "--card" },
+      { name: "Secondary", value: "#262626", css: "--secondary" },
+      { name: "Muted", value: "#2E2E2E", css: "--muted" },
+    ],
+  },
+  {
+    group: "Brand",
+    items: [
+      { name: "Primary (Teal)", value: "#78EAC1", css: "--primary" },
+      { name: "Accent (Purple)", value: "#7954FF", css: "--accent" },
+    ],
+  },
+  {
+    group: "Status",
+    items: [
+      { name: "Passed / Success", value: "#33BA9E", css: "--chart-1" },
+      { name: "Failed / Error", value: "#FF3131", css: "--destructive" },
+      { name: "Blocked / Warning", value: "#F48D21", css: "--chart-3" },
+    ],
+  },
+  {
+    group: "Text",
+    items: [
+      { name: "Primary Text", value: "#FFFFFF", css: "--foreground" },
+      { name: "Muted Text", value: "#888888", css: "--muted-foreground" },
+      { name: "Subtle Text", value: "#595959", css: "n/a" },
+    ],
+  },
+];
+
+export function ColorPalette() {
+  return (
+    <section>
+      <SectionHeader
+        title="Color Palette"
+        description="Core colors used throughout the application"
+      />
+      <div className="space-y-8">
+        {colors.map((group) => (
+          <div key={group.group}>
+            <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-[#888] uppercase tracking-wider mb-4">
+              {group.group}
+            </p>
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+              {group.items.map((color) => (
+                <div key={color.name} className="space-y-2">
+                  <div
+                    className="group/swatch h-20 rounded-[10px] border border-[#2e2e2e] relative"
+                    style={{ backgroundColor: color.value }}
+                  >
+                    <div className="absolute top-1.5 right-1.5 opacity-0 group-hover/swatch:opacity-100 transition-opacity flex gap-1">
+                      <CopyButton token={color.value} />
+                      {color.css !== "n/a" && <CopyButton token={`var(${color.css})`} />}
+                    </div>
+                  </div>
+                  <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-white">
+                    {color.name}
+                  </p>
+                  <div className="flex items-center gap-1.5">
+                    <p className="font-['Source_Sans_3',sans-serif] text-[12px] text-[#888] font-mono">
+                      {color.value}
+                    </p>
+                    {color.css !== "n/a" && (
+                      <span className="font-['Source_Sans_3',sans-serif] text-[11px] text-[#555] font-mono">
+                        {color.css}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/app/components/design-system/CopyButton.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useCallback } from "react";
+
+interface CopyButtonProps {
+  token: string;
+  className?: string;
+}
+
+export function CopyButton({ token, className = "" }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(
+    async (e: React.MouseEvent) => {
+      e.stopPropagation();
+      try {
+        await navigator.clipboard.writeText(token);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      } catch {
+        // Fallback
+        const textarea = document.createElement("textarea");
+        textarea.value = token;
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      }
+    },
+    [token]
+  );
+
+  return (
+    <button
+      onClick={handleCopy}
+      title={copied ? "Copied!" : `Copy: ${token}`}
+      className={`inline-flex items-center justify-center size-[26px] rounded-[6px] cursor-pointer transition-all ${
+        copied
+          ? "bg-chart-1/20 text-chart-1"
+          : "bg-muted text-muted-foreground hover:text-foreground hover:bg-muted/80"
+      } ${className}`}
+    >
+      {copied ? (
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+          <path
+            d="M2.5 7.5L5.5 10.5L11.5 3.5"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ) : (
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+          <rect
+            x="4.5"
+            y="4.5"
+            width="7"
+            height="7"
+            rx="1.5"
+            stroke="currentColor"
+            strokeWidth="1.2"
+          />
+          <path
+            d="M9.5 4.5V3C9.5 2.17157 8.82843 1.5 8 1.5H3C2.17157 1.5 1.5 2.17157 1.5 3V8C1.5 8.82843 2.17157 9.5 3 9.5H4.5"
+            stroke="currentColor"
+            strokeWidth="1.2"
+          />
+        </svg>
+      )}
+    </button>
+  );
+}
+
+interface CopyTokenWrapperProps {
+  token: string;
+  children: React.ReactNode;
+  className?: string;
+  inline?: boolean;
+}
+
+export function CopyTokenWrapper({
+  token,
+  children,
+  className = "",
+  inline = false,
+}: CopyTokenWrapperProps) {
+  return (
+    <div
+      className={`group/copy relative ${inline ? "inline-flex items-center" : ""} ${className}`}
+    >
+      {children}
+      <div
+        className={`opacity-0 group-hover/copy:opacity-100 transition-opacity ${
+          inline ? "ml-1.5" : "absolute top-1 right-1"
+        }`}
+      >
+        <CopyButton token={token} />
+      </div>
+    </div>
+  );
+}