src/blocks/theme.ts

// Scratch-adjacent look: Zelos renderer + bright block families, bold
// readable type. Light and dark variants differ only in surfaces.

import * as Blockly from "blockly";

const blockStyles: { [key: string]: Partial<Blockly.Theme.BlockStyle> } = {
  event_blocks: { colourPrimary: "#FFC800", colourSecondary: "#E6B400", colourTertiary: "#C79A00" },
  motion_blocks: { colourPrimary: "#4C97FF", colourSecondary: "#4287E0", colourTertiary: "#3373CC" },
  feeling_blocks: { colourPrimary: "#9966FF", colourSecondary: "#8A5CE6", colourTertiary: "#774DCB" },
  sound_blocks: { colourPrimary: "#3EBD64", colourSecondary: "#38A85A", colourTertiary: "#2E8C4A" },
  control_blocks: { colourPrimary: "#FFAB19", colourSecondary: "#EC9C13", colourTertiary: "#CF8B17" },
  sensing_blocks: { colourPrimary: "#2FB8C5", colourSecondary: "#28A5B1", colourTertiary: "#218F9A" },
};

const fontStyle = { family: "system-ui, sans-serif", weight: "600", size: 13.5 };

function makeTheme(mode: "light" | "dark"): Blockly.Theme {
  const dark = mode === "dark";
  return Blockly.Theme.defineTheme(`reachyKids${mode}`, {
    name: `reachyKids${mode}`,
    base: Blockly.Themes.Zelos,
    blockStyles,
    fontStyle,
    componentStyles: {
      workspaceBackgroundColour: dark ? "#17181d" : "#ffffff",
      flyoutBackgroundColour: dark ? "#22242c" : "#eef1f8",
      flyoutOpacity: 1,
      toolboxBackgroundColour: dark ? "#22242c" : "#eef1f8",
      scrollbarColour: dark ? "#565b6b" : "#c4cad9",
      scrollbarOpacity: 0.5,
      insertionMarkerColour: dark ? "#ffffff" : "#000000",
      insertionMarkerOpacity: 0.25,
      selectedGlowColour: "#ffd54d",
      selectedGlowOpacity: 0.6,
    },
  });
}

export const THEMES = {
  light: makeTheme("light"),
  dark: makeTheme("dark"),
};