feat: full studio build -- light theme, canvas thumbnails, i18n (fa/en)

2026-05-24 17:37:21 +03:30
parent d962483359
commit c61f587767
295 changed files with 29797 additions and 265 deletions
@@ -0,0 +1,96 @@
+export const DEFAULT_SCENE_BACKGROUND_COLOR = "#ffffff";
+export const DEFAULT_SCENE_ACCENT_COLOR = "#94a3b8";
+
+/**
+ * Each palette: [mainBg, accent, text, dark, darkest]
+ * Inspired by Renderforest's palette library.
+ */
+export const COLOR_PALETTES: string[][] = [
+  // 1 — Steel blue
+  ["#b0c8e0", "#7898b0", "#2a3a50", "#141a28", "#080c14"],
+  // 2 — Yellow-lime
+  ["#d8d040", "#90b838", "#3a5020", "#1a2810", "#28281a"],
+  // 3 — Warm sunset
+  ["#d8b08a", "#c07060", "#881820", "#4a0808", "#1a0408"],
+  // 4 — Mint teal
+  ["#90d8b8", "#50c8a0", "#107860", "#064030", "#021a14"],
+  // 5 — Royal blue
+  ["#a0b8f0", "#5878e8", "#2028b0", "#0a1060", "#080830"],
+  // 6 — Rose pink
+  ["#f0a8c0", "#e04898", "#981060", "#4a0830", "#200818"],
+  // 7 — Warm amber
+  ["#e8b880", "#d07838", "#9a3010", "#4a1808", "#1a0804"],
+  // 8 — Deep violet
+  ["#d8a8f0", "#b068e8", "#701898", "#380850", "#18041e"],
+  // 9 — Periwinkle
+  ["#d0d8f0", "#a8b8e8", "#6070d0", "#2030a0", "#101870"],
+  // 10 — Gold amber
+  ["#f0e040", "#e0b830", "#987010", "#485010", "#202810"],
+  // 11 — Silver neutral
+  ["#f0f2f4", "#c0d0d8", "#8098a8", "#304050", "#90c0e0"],
+  // 12 — Forest green
+  ["#a0e0a8", "#60c870", "#207820", "#103810", "#081808"],
+  // 13 — Warm gray + orange
+  ["#e0e0e0", "#9098a0", "#404858", "#d07030", "#c05020"],
+  // 14 — Coral red
+  ["#f09090", "#e83030", "#e0e0e0", "#3a3a3a", "#f0c030"],
+  // 15 — Midnight teal
+  ["#1a3a4a", "#0d5c6e", "#1a9aae", "#80d0df", "#e0f4f8"],
+  // 16 — Neon purple
+  ["#2d0060", "#5c00c0", "#9b30ff", "#d090ff", "#f0d8ff"],
+  // 17 — Earthy brown
+  ["#3d2010", "#7a4020", "#c07840", "#e0b880", "#f5e0c0"],
+  // 18 — Ocean depth
+  ["#001030", "#003060", "#0060c0", "#40a0e0", "#a0d8f8"],
+  // 19 — Cherry blossom
+  ["#f8e0e8", "#f0a0c0", "#e04880", "#980840", "#400018"],
+  // 20 — Electric teal
+  ["#003030", "#006060", "#00a8a8", "#40e0d0", "#a0f4f0"],
+];
+
+/** Returns a human-readable name for display purposes */
+export const PALETTE_NAMES: string[] = [
+  "Steel Blue",
+  "Yellow Lime",
+  "Warm Sunset",
+  "Mint Teal",
+  "Royal Blue",
+  "Rose Pink",
+  "Warm Amber",
+  "Deep Violet",
+  "Periwinkle",
+  "Gold Amber",
+  "Silver",
+  "Forest Green",
+  "Urban Gray",
+  "Coral Red",
+  "Midnight Teal",
+  "Neon Purple",
+  "Earthy Brown",
+  "Ocean Depth",
+  "Cherry Blossom",
+  "Electric Teal",
+];
+
+/** @deprecated Use COLOR_PALETTES */
+export const STUDIO_COLOR_PALETTES = COLOR_PALETTES.map((colors, index) => ({
+  id: `palette-${index}`,
+  name: PALETTE_NAMES[index] ?? `Palette ${index + 1}`,
+  colors: colors.slice(0, 4) as [string, string, string, string],
+}));
+
+/** Returns true if the hex color is perceptually dark (good for white text on top) */
+export function isColorDark(hex: string): boolean {
+  const clean = hex.replace("#", "");
+  const r = parseInt(clean.slice(0, 2), 16);
+  const g = parseInt(clean.slice(2, 4), 16);
+  const b = parseInt(clean.slice(4, 6), 16);
+  // WCAG luminance approximation
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+  return brightness < 128;
+}
+
+/** Pick a readable text colour for a given background */
+export function contrastTextColor(bgHex: string): string {
+  return isColorDark(bgHex) ? "#ffffff" : "#111827";
+}