@pixel-point/toolcraft 0.0.2

package/templates/ui/components/controls/color/palette-control-data.ts

@@ -0,0 +1,436 @@
+export const PALETTE_SHADE_STEPS = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"] as const;
+
+export type PaletteShadeStep = (typeof PALETTE_SHADE_STEPS)[number];
+
+export const TAILWIND_COLOR_PALETTE = [
+  {
+    name: "Red",
+    shades: {
+      "50": "#fef2f2",
+      "100": "#fee2e2",
+      "200": "#fecaca",
+      "300": "#fca5a5",
+      "400": "#f87171",
+      "500": "#ef4444",
+      "600": "#dc2626",
+      "700": "#b91c1c",
+      "800": "#991b1b",
+      "900": "#7f1d1d",
+      "950": "#450a0a",
+    },
+  },
+  {
+    name: "Orange",
+    shades: {
+      "50": "#fff7ed",
+      "100": "#ffedd5",
+      "200": "#fed7aa",
+      "300": "#fdba74",
+      "400": "#fb923c",
+      "500": "#f97316",
+      "600": "#ea580c",
+      "700": "#c2410c",
+      "800": "#9a3412",
+      "900": "#7c2d12",
+      "950": "#431407",
+    },
+  },
+  {
+    name: "Amber",
+    shades: {
+      "50": "#fffbeb",
+      "100": "#fef3c7",
+      "200": "#fde68a",
+      "300": "#fcd34d",
+      "400": "#fbbf24",
+      "500": "#f59e0b",
+      "600": "#d97706",
+      "700": "#b45309",
+      "800": "#92400e",
+      "900": "#78350f",
+      "950": "#451a03",
+    },
+  },
+  {
+    name: "Yellow",
+    shades: {
+      "50": "#fefce8",
+      "100": "#fef9c3",
+      "200": "#fef08a",
+      "300": "#fde047",
+      "400": "#facc15",
+      "500": "#eab308",
+      "600": "#ca8a04",
+      "700": "#a16207",
+      "800": "#854d0e",
+      "900": "#713f12",
+      "950": "#422006",
+    },
+  },
+  {
+    name: "Lime",
+    shades: {
+      "50": "#f7fee7",
+      "100": "#ecfccb",
+      "200": "#d9f99d",
+      "300": "#bef264",
+      "400": "#a3e635",
+      "500": "#84cc16",
+      "600": "#65a30d",
+      "700": "#4d7c0f",
+      "800": "#3f6212",
+      "900": "#365314",
+      "950": "#1a2e05",
+    },
+  },
+  {
+    name: "Green",
+    shades: {
+      "50": "#f0fdf4",
+      "100": "#dcfce7",
+      "200": "#bbf7d0",
+      "300": "#86efac",
+      "400": "#4ade80",
+      "500": "#22c55e",
+      "600": "#16a34a",
+      "700": "#15803d",
+      "800": "#166534",
+      "900": "#14532d",
+      "950": "#052e16",
+    },
+  },
+  {
+    name: "Emerald",
+    shades: {
+      "50": "#ecfdf5",
+      "100": "#d1fae5",
+      "200": "#a7f3d0",
+      "300": "#6ee7b7",
+      "400": "#34d399",
+      "500": "#10b981",
+      "600": "#059669",
+      "700": "#047857",
+      "800": "#065f46",
+      "900": "#064e3b",
+      "950": "#022c22",
+    },
+  },
+  {
+    name: "Teal",
+    shades: {
+      "50": "#f0fdfa",
+      "100": "#ccfbf1",
+      "200": "#99f6e4",
+      "300": "#5eead4",
+      "400": "#2dd4bf",
+      "500": "#14b8a6",
+      "600": "#0d9488",
+      "700": "#0f766e",
+      "800": "#115e59",
+      "900": "#134e4a",
+      "950": "#042f2e",
+    },
+  },
+  {
+    name: "Cyan",
+    shades: {
+      "50": "#ecfeff",
+      "100": "#cffafe",
+      "200": "#a5f3fc",
+      "300": "#67e8f9",
+      "400": "#22d3ee",
+      "500": "#06b6d4",
+      "600": "#0891b2",
+      "700": "#0e7490",
+      "800": "#155e75",
+      "900": "#164e63",
+      "950": "#083344",
+    },
+  },
+  {
+    name: "Sky",
+    shades: {
+      "50": "#f0f9ff",
+      "100": "#e0f2fe",
+      "200": "#bae6fd",
+      "300": "#7dd3fc",
+      "400": "#38bdf8",
+      "500": "#0ea5e9",
+      "600": "#0284c7",
+      "700": "#0369a1",
+      "800": "#075985",
+      "900": "#0c4a6e",
+      "950": "#082f49",
+    },
+  },
+  {
+    name: "Blue",
+    shades: {
+      "50": "#eff6ff",
+      "100": "#dbeafe",
+      "200": "#bfdbfe",
+      "300": "#93c5fd",
+      "400": "#60a5fa",
+      "500": "#3b82f6",
+      "600": "#2563eb",
+      "700": "#1d4ed8",
+      "800": "#1e40af",
+      "900": "#1e3a8a",
+      "950": "#172554",
+    },
+  },
+  {
+    name: "Indigo",
+    shades: {
+      "50": "#eef2ff",
+      "100": "#e0e7ff",
+      "200": "#c7d2fe",
+      "300": "#a5b4fc",
+      "400": "#818cf8",
+      "500": "#6366f1",
+      "600": "#4f46e5",
+      "700": "#4338ca",
+      "800": "#3730a3",
+      "900": "#312e81",
+      "950": "#1e1b4b",
+    },
+  },
+  {
+    name: "Violet",
+    shades: {
+      "50": "#f5f3ff",
+      "100": "#ede9fe",
+      "200": "#ddd6fe",
+      "300": "#c4b5fd",
+      "400": "#a78bfa",
+      "500": "#8b5cf6",
+      "600": "#7c3aed",
+      "700": "#6d28d9",
+      "800": "#5b21b6",
+      "900": "#4c1d95",
+      "950": "#2e1065",
+    },
+  },
+  {
+    name: "Purple",
+    shades: {
+      "50": "#faf5ff",
+      "100": "#f3e8ff",
+      "200": "#e9d5ff",
+      "300": "#d8b4fe",
+      "400": "#c084fc",
+      "500": "#a855f7",
+      "600": "#9333ea",
+      "700": "#7e22ce",
+      "800": "#6b21a8",
+      "900": "#581c87",
+      "950": "#3b0764",
+    },
+  },
+  {
+    name: "Fuchsia",
+    shades: {
+      "50": "#fdf4ff",
+      "100": "#fae8ff",
+      "200": "#f5d0fe",
+      "300": "#f0abfc",
+      "400": "#e879f9",
+      "500": "#d946ef",
+      "600": "#c026d3",
+      "700": "#a21caf",
+      "800": "#86198f",
+      "900": "#701a75",
+      "950": "#4a044e",
+    },
+  },
+  {
+    name: "Pink",
+    shades: {
+      "50": "#fdf2f8",
+      "100": "#fce7f3",
+      "200": "#fbcfe8",
+      "300": "#f9a8d4",
+      "400": "#f472b6",
+      "500": "#ec4899",
+      "600": "#db2777",
+      "700": "#be185d",
+      "800": "#9d174d",
+      "900": "#831843",
+      "950": "#500724",
+    },
+  },
+  {
+    name: "Rose",
+    shades: {
+      "50": "#fff1f2",
+      "100": "#ffe4e6",
+      "200": "#fecdd3",
+      "300": "#fda4af",
+      "400": "#fb7185",
+      "500": "#f43f5e",
+      "600": "#e11d48",
+      "700": "#be123c",
+      "800": "#9f1239",
+      "900": "#881337",
+      "950": "#4c0519",
+    },
+  },
+  {
+    name: "Slate",
+    shades: {
+      "50": "#f8fafc",
+      "100": "#f1f5f9",
+      "200": "#e2e8f0",
+      "300": "#cbd5e1",
+      "400": "#94a3b8",
+      "500": "#64748b",
+      "600": "#475569",
+      "700": "#334155",
+      "800": "#1e293b",
+      "900": "#0f172a",
+      "950": "#020617",
+    },
+  },
+  {
+    name: "Gray",
+    shades: {
+      "50": "#f9fafb",
+      "100": "#f3f4f6",
+      "200": "#e5e7eb",
+      "300": "#d1d5db",
+      "400": "#9ca3af",
+      "500": "#6b7280",
+      "600": "#4b5563",
+      "700": "#374151",
+      "800": "#1f2937",
+      "900": "#111827",
+      "950": "#030712",
+    },
+  },
+  {
+    name: "Zinc",
+    shades: {
+      "50": "#fafafa",
+      "100": "#f4f4f5",
+      "200": "#e4e4e7",
+      "300": "#d4d4d8",
+      "400": "#a1a1aa",
+      "500": "#71717a",
+      "600": "#52525b",
+      "700": "#3f3f46",
+      "800": "#27272a",
+      "900": "#18181b",
+      "950": "#09090b",
+    },
+  },
+  {
+    name: "Neutral",
+    shades: {
+      "50": "#fafafa",
+      "100": "#f5f5f5",
+      "200": "#e5e5e5",
+      "300": "#d4d4d4",
+      "400": "#a3a3a3",
+      "500": "#737373",
+      "600": "#525252",
+      "700": "#404040",
+      "800": "#262626",
+      "900": "#171717",
+      "950": "#0a0a0a",
+    },
+  },
+  {
+    name: "Stone",
+    shades: {
+      "50": "#fafaf9",
+      "100": "#f5f5f4",
+      "200": "#e7e5e4",
+      "300": "#d6d3d1",
+      "400": "#a8a29e",
+      "500": "#78716c",
+      "600": "#57534e",
+      "700": "#44403c",
+      "800": "#292524",
+      "900": "#1c1917",
+      "950": "#0c0a09",
+    },
+  },
+  {
+    name: "Mauve",
+    shades: {
+      "50": "#f7f4f8",
+      "100": "#ece8ee",
+      "200": "#ddd5e0",
+      "300": "#c5b8ca",
+      "400": "#a796ae",
+      "500": "#8c7694",
+      "600": "#755f7d",
+      "700": "#614d67",
+      "800": "#514156",
+      "900": "#443847",
+      "950": "#2b232d",
+    },
+  },
+  {
+    name: "Olive",
+    shades: {
+      "50": "#f7f7f3",
+      "100": "#ebebe3",
+      "200": "#d8d9c9",
+      "300": "#bbbd9f",
+      "400": "#9ca07c",
+      "500": "#838662",
+      "600": "#686b4e",
+      "700": "#53563f",
+      "800": "#454734",
+      "900": "#3c3d2e",
+      "950": "#1e1f17",
+    },
+  },
+  {
+    name: "Mist",
+    shades: {
+      "50": "#f0f4f5",
+      "100": "#dde6e8",
+      "200": "#c3d3d6",
+      "300": "#9cb7bc",
+      "400": "#6d9198",
+      "500": "#4f7580",
+      "600": "#45646f",
+      "700": "#3d5560",
+      "800": "#384850",
+      "900": "#323f45",
+      "950": "#21292d",
+    },
+  },
+  {
+    name: "Taupe",
+    shades: {
+      "50": "#f6f3f2",
+      "100": "#ede7e5",
+      "200": "#ddd2ce",
+      "300": "#c7b6b0",
+      "400": "#ac958d",
+      "500": "#947d74",
+      "600": "#7f6a63",
+      "700": "#675752",
+      "800": "#574a46",
+      "900": "#4a403d",
+      "950": "#2b2422",
+    },
+  },
+] as const;
+
+export type PaletteColorFamily = (typeof TAILWIND_COLOR_PALETTE)[number]["name"];
+
+export type PaletteControlValue = {
+  family: PaletteColorFamily;
+  shade: PaletteShadeStep;
+};
+
+export const STYLE_GUIDE_PRIMARY_FAMILY_OPTIONS = TAILWIND_COLOR_PALETTE.slice(0, -1);
+
+export function getPaletteHex(value: PaletteControlValue): string {
+  const palette = TAILWIND_COLOR_PALETTE.find((entry) => entry.name === value.family) ?? TAILWIND_COLOR_PALETTE[0];
+  return palette.shades[value.shade].toLowerCase();
+}