create-easel-theme 0.1.0

package/dist/cli.js

@@ -0,0 +1,604 @@
+// src/cli.ts
+import * as p from "@clack/prompts";
+
+// src/directory.ts
+import { lstatSync, readdirSync } from "fs";
+var preservedEntries = /* @__PURE__ */ new Set([".git", ".DS_Store"]);
+function assertTargetDirectory(target) {
+  const metadata = lstatSync(target, { throwIfNoEntry: false });
+  if (!metadata) return;
+  if (metadata.isSymbolicLink() || !metadata.isDirectory()) {
+    throw new Error(`Target already exists and is not a regular directory: ${target}.`);
+  }
+  if (readdirSync(target).some((name) => !preservedEntries.has(name))) {
+    throw new Error(
+      `Target already exists and is not empty: ${target}. Use an empty directory (.git and .DS_Store are allowed). Existing files are never overwritten.`
+    );
+  }
+  return metadata;
+}
+
+// src/cli.ts
+import { resolve as resolve3 } from "path";
+
+// package.json
+var version = "0.1.0";
+
+// src/generate.ts
+import {
+  cpSync,
+  mkdirSync as mkdirSync2,
+  mkdtempSync,
+  readFileSync as readFileSync2,
+  renameSync,
+  rmSync,
+  writeFileSync
+} from "fs";
+import { tmpdir } from "os";
+import { join as join2, resolve as resolve2 } from "path";
+import { fileURLToPath } from "url";
+
+// src/options.ts
+import { basename, resolve } from "path";
+import { parseArgs } from "util";
+var languages = ["ts", "js"];
+var frameworks = ["none", "alpine", "react", "vue"];
+var packageManagers = ["npm", "pnpm", "yarn", "bun"];
+function parseArguments(args) {
+  const { values, positionals } = parseArgs({
+    args,
+    allowPositionals: true,
+    allowNegative: true,
+    strict: true,
+    options: {
+      help: { type: "boolean", short: "h" },
+      version: { type: "boolean", short: "v" },
+      yes: { type: "boolean", short: "y" },
+      name: { type: "string" },
+      language: { type: "string" },
+      framework: { type: "string" },
+      tailwind: { type: "boolean" },
+      install: { type: "boolean" },
+      "package-manager": { type: "string" },
+      interactive: { type: "boolean" }
+    }
+  });
+  if (positionals.length > 1) throw new Error("Provide only one target directory.");
+  if (values.language !== void 0) choice(values.language, languages, "--language");
+  if (values.framework !== void 0) choice(values.framework, frameworks, "--framework");
+  if (values["package-manager"] !== void 0) {
+    choice(values["package-manager"], packageManagers, "--package-manager");
+  }
+  if (values.name !== void 0) validateName(values.name);
+  return { ...values, target: positionals[0] };
+}
+function choice(value, options, label) {
+  const match = options.find((option) => option === value);
+  if (match === void 0)
+    throw new Error(`${label} must be one of: ${options.join(", ")}.`);
+  return match;
+}
+function detectPackageManager(userAgent = process.env.npm_config_user_agent) {
+  return packageManagers.find((manager) => userAgent?.startsWith(`${manager}/`)) ?? "npm";
+}
+function validateName(name) {
+  if (!/^[A-Za-z0-9][A-Za-z0-9 _-]{0,49}$/.test(name)) {
+    throw new Error(
+      "Theme name must be 1\u201350 characters: letters, numbers, spaces, underscores, or hyphens."
+    );
+  }
+}
+function packageNameFor(target) {
+  if (!target.trim() || /[\u0000-\u001f\u007f]/.test(resolve(target))) {
+    throw new Error("Provide a target directory without control characters.");
+  }
+  const name = basename(resolve(target));
+  if (/^(?:con|prn|aux|nul|com[1-9]|lpt[1-9])(?:\.|$)/i.test(name)) {
+    throw new Error(
+      "The target uses a reserved Windows filename. Choose another directory."
+    );
+  }
+  const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  if (!slug || slug.length > 214 || slug === "node-modules" || slug === "favicon-ico") {
+    throw new Error("The target directory must produce a valid npm package name.");
+  }
+  return slug;
+}
+function defaultName(target) {
+  return packageNameFor(target).split("-").map((part) => part[0]?.toUpperCase() + part.slice(1)).join(" ").slice(0, 50).trim();
+}
+function validateOptions(options) {
+  packageNameFor(options.target);
+  validateName(options.name);
+  choice(options.language, languages, "Language");
+  choice(options.framework, frameworks, "Framework");
+  if (typeof options.tailwind !== "boolean")
+    throw new Error("Tailwind must be a boolean.");
+}
+
+// src/write-project.ts
+import {
+  constants,
+  copyFileSync,
+  lstatSync as lstatSync2,
+  mkdirSync,
+  readFileSync,
+  readdirSync as readdirSync2,
+  rmdirSync,
+  unlinkSync
+} from "fs";
+import { dirname, join } from "path";
+function sameEntry(path, expected) {
+  const actual = lstatSync2(path, { throwIfNoEntry: false });
+  return Boolean(
+    actual && !actual.isSymbolicLink() && actual.dev === expected.dev && actual.ino === expected.ino
+  );
+}
+function writeProject(source, target) {
+  let root = assertTargetDirectory(target);
+  const created = [];
+  if (!root) {
+    mkdirSync(dirname(target), { recursive: true });
+    mkdirSync(target);
+    root = lstatSync2(target);
+    created.push({ path: target, metadata: root });
+  }
+  const directories = /* @__PURE__ */ new Map([[target, root]]);
+  const directoriesIntact = () => [...directories].every(([path, metadata]) => sameEntry(path, metadata));
+  function copy(directory, destination) {
+    for (const entry of readdirSync2(directory, { withFileTypes: true })) {
+      if (!directoriesIntact())
+        throw new Error("The target directory changed during generation.");
+      const input = join(directory, entry.name);
+      const output = join(destination, entry.name);
+      if (entry.isDirectory()) {
+        mkdirSync(output);
+        const metadata = lstatSync2(output);
+        created.push({ path: output, metadata });
+        directories.set(output, metadata);
+        copy(input, output);
+      } else if (entry.isFile()) {
+        const contents = readFileSync(input);
+        copyFileSync(input, output, constants.COPYFILE_EXCL);
+        created.push({ path: output, metadata: lstatSync2(output), contents });
+      } else {
+        throw new Error(`Unsupported generated entry: ${input}`);
+      }
+    }
+  }
+  try {
+    copy(source, target);
+  } catch (error) {
+    for (const entry of created.reverse()) {
+      try {
+        if (!directoriesIntact() || !sameEntry(entry.path, entry.metadata)) continue;
+        if (entry.contents !== void 0) {
+          if (readFileSync(entry.path).equals(entry.contents)) unlinkSync(entry.path);
+        } else {
+          rmdirSync(entry.path);
+          directories.delete(entry.path);
+        }
+      } catch {
+      }
+    }
+    throw error;
+  }
+}
+
+// src/project.ts
+function projectPackage(options) {
+  const typescript = options.language === "ts";
+  const dependencies = {};
+  const devDependencies = {
+    vite: "8.2.2",
+    "vite-plugin-shopify-easel": "0.1.0"
+  };
+  if (typescript) devDependencies.typescript = "5.9.3";
+  if (options.framework === "alpine") {
+    dependencies.alpinejs = "3.17.1";
+    if (typescript) devDependencies["@types/alpinejs"] = "3.13.11";
+  }
+  if (options.framework === "react") {
+    dependencies.react = "19.2.8";
+    dependencies["react-dom"] = "19.2.8";
+    devDependencies["@vitejs/plugin-react"] = "6.1.1";
+    if (typescript) {
+      devDependencies["@types/react"] = "19.2.18";
+      devDependencies["@types/react-dom"] = "19.2.7";
+    }
+  }
+  if (options.framework === "vue") {
+    dependencies.vue = "3.5.42";
+    devDependencies["@vitejs/plugin-vue"] = "6.0.8";
+    if (typescript) devDependencies["vue-tsc"] = "3.3.11";
+  }
+  if (options.tailwind) {
+    devDependencies.tailwindcss = "4.3.3";
+    devDependencies["@tailwindcss/vite"] = "4.3.3";
+  }
+  const typecheck = options.framework === "vue" ? "vue-tsc" : "tsc";
+  return {
+    name: packageNameFor(options.target),
+    private: true,
+    type: "module",
+    engines: { node: ">=22.12.0" },
+    scripts: {
+      dev: "vite",
+      build: "vite build",
+      check: typescript ? `${typecheck} --noEmit && vite build` : "vite build"
+    },
+    ...Object.keys(dependencies).length ? { dependencies } : {},
+    devDependencies
+  };
+}
+function viteConfiguration(options) {
+  const imports = [
+    "import {defineConfig} from 'vite';",
+    "import easel from 'vite-plugin-shopify-easel';"
+  ];
+  const plugins = [];
+  if (options.framework === "react" || options.framework === "vue") {
+    imports.push(
+      `import ${options.framework} from '@vitejs/plugin-${options.framework}';`
+    );
+    plugins.push(`${options.framework}()`);
+  }
+  if (options.tailwind) {
+    imports.push("import tailwindcss from '@tailwindcss/vite';");
+    plugins.push("tailwindcss()");
+  }
+  const easel = options.framework === "react" ? `easel({bundles: {theme: {script: 'main.${options.language}x', style: 'style.css'}}})` : "easel()";
+  plugins.push(easel);
+  return `${imports.join("\n")}
+
+export default defineConfig({
+  plugins: [${plugins.join(", ")}],
+});
+`;
+}
+function typescriptConfiguration(options) {
+  return {
+    compilerOptions: {
+      target: "ES2022",
+      lib: ["ES2022", "DOM", "DOM.Iterable"],
+      module: "ESNext",
+      moduleResolution: "Bundler",
+      moduleDetection: "force",
+      strict: true,
+      noEmit: true,
+      skipLibCheck: true,
+      types: ["vite/client"],
+      ...options.framework === "react" ? { jsx: "react-jsx" } : {}
+    },
+    include: ["src", "vite.config.ts"]
+  };
+}
+function projectReadme(options) {
+  return `# ${options.name}
+
+A focused Shopify Liquid starter using Easel, Vite, ${options.language === "ts" ? "TypeScript" : "JavaScript"}, ${options.framework === "none" ? "no UI framework" : options.framework}, and ${options.tailwind ? "Tailwind CSS" : "plain CSS"}.
+
+## Develop
+
+Install dependencies with your chosen package manager, then run \`npm run dev\` (or the equivalent \`pnpm\`, \`yarn\`, or \`bun\` script).
+
+In a second terminal, run:
+
+\`shopify theme dev --store your-store.myshopify.com --notify .easel/shopify-ready\`
+
+Shopify CLI is installed and authenticated separately. The notification flag is optional; Vite HMR and Shopify CLI live reload also work independently. Use \`pnpm install --ignore-workspace\` if this theme is nested inside an unrelated pnpm workspace.
+
+## Build and deploy
+
+Stop the Vite development server, run \`npm run check\`, then use Shopify CLI to preview or deploy the theme. \`npm run build\` builds without the additional TypeScript check.
+
+Deploy \`snippets/easel-assets.liquid\` together with its matching built assets. These generated files are ignored by Git. Never delete unrelated assets or Easel's ownership state to force a build.
+
+## Structure
+
+Shopify directories live at the project root. Source lives in \`src/\`; Easel is configured in \`vite.config.${options.language}\`. The homepage contains a small counter to demonstrate the selected tools, with initialization and cleanup for Theme Editor section reloads.
+
+This is a minimal starter, not a complete commerce theme: product, collection, cart, and other storefront features are yours to build. Update theme metadata in \`config/settings_schema.json\` for your project.
+
+Start with one shared entry. Add named page bundles only when selective loading is useful; see [the named bundles example](https://github.com/BillyNoyes/Easel/tree/main/examples/named-bundles).
+
+[Easel documentation](https://easel.billynoyes.co.uk/docs/)
+`;
+}
+
+// src/generate.ts
+var templates = fileURLToPath(new URL("../dist/templates/", import.meta.url));
+function generateTheme(options, templateRoot = templates) {
+  validateOptions(options);
+  const target = resolve2(options.target);
+  assertTargetDirectory(target);
+  const staging = mkdtempSync(join2(tmpdir(), "easel-create-"));
+  try {
+    renderTheme(options, staging, templateRoot);
+    writeProject(staging, target);
+    return target;
+  } finally {
+    rmSync(staging, { recursive: true, force: true });
+  }
+}
+function renderTheme(options, target, templateRoot) {
+  const source = join2(templateRoot, options.language);
+  cpSync(join2(source, "base"), target, {
+    recursive: true,
+    force: false,
+    errorOnExist: true
+  });
+  if (options.framework !== "none") {
+    rmSync(join2(target, "src", `main.${options.language}`));
+    cpSync(join2(source, options.framework), target, { recursive: true });
+  }
+  for (const directory of [
+    "assets",
+    "blocks",
+    "config",
+    "layout",
+    "locales",
+    "sections",
+    "snippets",
+    "src",
+    "templates"
+  ]) {
+    mkdirSync2(join2(target, directory), { recursive: true });
+  }
+  renameSync(join2(target, "_gitignore"), join2(target, ".gitignore"));
+  const writeJson = (path, data) => writeFileSync(join2(target, path), `${JSON.stringify(data, null, 2)}
+`);
+  writeJson("package.json", projectPackage(options));
+  writeFileSync(
+    join2(target, `vite.config.${options.language}`),
+    viteConfiguration(options)
+  );
+  if (options.language === "ts")
+    writeJson("tsconfig.json", typescriptConfiguration(options));
+  writeFileSync(join2(target, "README.md"), projectReadme(options));
+  for (const file of ["config/settings_schema.json", "locales/en.default.schema.json"]) {
+    const path = join2(target, file);
+    writeFileSync(
+      path,
+      readFileSync2(path, "utf8").replaceAll("__THEME_NAME__", options.name)
+    );
+  }
+  if (options.framework === "alpine")
+    rmSync(join2(target, "src", `sections.${options.language}`));
+  if (options.tailwind) {
+    const path = join2(target, "src/style.css");
+    writeFileSync(
+      path,
+      `@import 'tailwindcss';
+@source '../layout';
+@source '../sections';
+@source '../snippets';
+@source '../blocks';
+@source '../templates';
+
+${readFileSync2(path, "utf8")}`
+    );
+    const hero = join2(target, "sections/hero.liquid");
+    writeFileSync(
+      hero,
+      readFileSync2(hero, "utf8").replace(
+        'class="hero"',
+        'class="hero rounded-xl border"'
+      )
+    );
+  }
+}
+
+// src/install.ts
+import spawn from "cross-spawn";
+function installArguments(manager) {
+  return manager === "pnpm" ? ["install", "--ignore-workspace"] : ["install"];
+}
+var InstallError = class extends Error {
+  constructor(message, cancelled) {
+    super(message);
+    this.cancelled = cancelled;
+  }
+  cancelled;
+};
+function installDependencies(target, manager) {
+  return new Promise((resolve4, reject) => {
+    let child;
+    let interrupted = false;
+    const interrupt = () => {
+      interrupted = true;
+      child?.kill("SIGINT");
+    };
+    process.on("SIGINT", interrupt);
+    const cleanup = () => process.removeListener("SIGINT", interrupt);
+    try {
+      child = spawn(manager, installArguments(manager), { cwd: target, stdio: "inherit" });
+    } catch (error) {
+      cleanup();
+      reject(
+        new InstallError(
+          `Could not run ${manager}: ${error instanceof Error ? error.message : String(error)}`,
+          interrupted
+        )
+      );
+      return;
+    }
+    if (interrupted) child.kill("SIGINT");
+    child.on("error", (error) => {
+      cleanup();
+      reject(new InstallError(`Could not run ${manager}: ${error.message}`, interrupted));
+    });
+    child.on("close", (code, signal) => {
+      cleanup();
+      if (code === 0 && !interrupted) resolve4();
+      else
+        reject(
+          new InstallError(
+            `${manager} install ${interrupted || signal ? "was interrupted" : `exited with code ${String(code)}`}.`,
+            interrupted || signal === "SIGINT"
+          )
+        );
+    });
+  });
+}
+function changeDirectoryCommand(path, platform = process.platform) {
+  if (platform === "win32")
+    return `Set-Location -LiteralPath '${path.replaceAll("'", "''")}'`;
+  return `cd '${path.replaceAll("'", "'\\''")}'`;
+}
+
+// src/cli.ts
+var help = `Usage: create-easel-theme <directory> [options]
+
+Create a Shopify Liquid theme with Easel and Vite.
+
+  --language ts|js                 Language (default: ts)
+  --framework none|alpine|react|vue UI tools (default: none)
+  --tailwind / --no-tailwind       Tailwind CSS (default: plain CSS)
+  --name <name>                   Theme display name
+  --package-manager npm|pnpm|yarn|bun
+  --install / --no-install        Install dependencies
+  --yes, -y                      Use defaults without prompts
+  --no-interactive               Disable prompts
+  --help, -h                     Show help
+  --version, -v                  Show version
+
+Non-interactive runs require a directory and only install with --install.
+Use . for the current directory, empty apart from .git or .DS_Store.
+Existing project files are never overwritten. Shopify CLI remains separate.
+`;
+var Cancelled = class extends Error {
+};
+async function ask(answer) {
+  const value = await answer;
+  if (p.isCancel(value)) throw new Cancelled();
+  return value;
+}
+function targetError(target) {
+  try {
+    if (!target) throw new Error("Provide a directory for your theme.");
+    packageNameFor(target);
+    assertTargetDirectory(resolve3(target));
+  } catch (error) {
+    return error instanceof Error ? error.message : String(error);
+  }
+}
+async function main() {
+  let interactive = false;
+  try {
+    const args = parseArguments(process.argv.slice(2));
+    if (args.help) {
+      console.log(help);
+      return;
+    }
+    if (args.version) {
+      console.log(version);
+      return;
+    }
+    const tty = Boolean(process.stdin.isTTY && process.stdout.isTTY);
+    if (args.interactive && !tty)
+      throw new Error(
+        "Interactive mode requires a terminal. Supply a directory and flags instead."
+      );
+    const ci = Boolean(process.env.CI && !["false", "0"].includes(process.env.CI));
+    interactive = tty && !args.yes && (args.interactive ?? !ci);
+    if (interactive) p.intro(`Create an Easel theme \xB7 ${version}`);
+    const target = args.target ?? (interactive ? await ask(
+      p.text({
+        message: "Where should we create your theme? (. for current directory)",
+        placeholder: "my-theme",
+        defaultValue: "my-theme",
+        validate: (value) => targetError(value || "my-theme")
+      })
+    ) : void 0);
+    const problem = targetError(target);
+    if (problem || !target) throw new Error(problem ?? "Provide a target directory.");
+    const language = choice(
+      args.language ?? (interactive ? await ask(
+        p.select({
+          message: "Which language?",
+          initialValue: "ts",
+          options: [
+            { value: "ts", label: "TypeScript", hint: "recommended" },
+            { value: "js", label: "JavaScript" }
+          ]
+        })
+      ) : "ts"),
+      languages,
+      "--language"
+    );
+    const framework = choice(
+      args.framework ?? (interactive ? await ask(
+        p.select({
+          message: "Which UI tools?",
+          initialValue: "none",
+          options: [
+            { value: "none", label: "None", hint: "plain browser APIs" },
+            { value: "alpine", label: "Alpine" },
+            { value: "react", label: "React" },
+            { value: "vue", label: "Vue" }
+          ]
+        })
+      ) : "none"),
+      frameworks,
+      "--framework"
+    );
+    const tailwind = args.tailwind ?? (interactive ? await ask(p.confirm({ message: "Add Tailwind CSS?", initialValue: false })) : false);
+    const manager = choice(
+      args["package-manager"] ?? detectPackageManager(),
+      packageManagers,
+      "--package-manager"
+    );
+    const install = args.install ?? (interactive ? await ask(
+      p.confirm({
+        message: `Install dependencies with ${manager}? This runs package install scripts.`,
+        initialValue: true
+      })
+    ) : false);
+    const options = {
+      target,
+      name: args.name ?? defaultName(target),
+      language,
+      framework,
+      tailwind
+    };
+    if (interactive) p.log.step("Creating your theme\u2026");
+    const created = generateTheme(options);
+    if (interactive) p.log.success(`Created ${created}`);
+    else console.log(`Created ${created}`);
+    let installed = false;
+    if (install) {
+      if (interactive) p.log.step(`Installing with ${manager}\u2026`);
+      try {
+        await installDependencies(created, manager);
+        installed = true;
+      } catch (error) {
+        console.error(error instanceof Error ? error.message : String(error));
+        console.error(
+          "Your theme files have been kept. You can retry installation below."
+        );
+        process.exitCode = error instanceof InstallError && error.cancelled ? 130 : 1;
+      }
+    }
+    const steps = created === process.cwd() ? [] : [changeDirectoryCommand(created)];
+    if (!installed) steps.push(`${manager} ${installArguments(manager).join(" ")}`);
+    steps.push(`${manager} run dev`);
+    const message = `${steps.join("\n")}
+
+In another terminal:
+shopify theme dev --store your-store.myshopify.com --notify .easel/shopify-ready
+
+Shopify CLI must be installed and authenticated separately.`;
+    if (interactive) {
+      p.note(message, "Next steps");
+      p.outro("Your theme is yours to build.");
+    } else console.log(`
+${message}`);
+  } catch (error) {
+    const message = error instanceof Cancelled ? "Operation cancelled. No theme created." : error instanceof Error ? error.message : String(error);
+    if (interactive) p.cancel(message);
+    else console.error(message);
+    process.exitCode = error instanceof Cancelled ? 130 : 1;
+  }
+}
+await main();

package/dist/templates/js/alpine/snippets/counter.liquid

@@ -0,0 +1,9 @@
+{% doc %}
+  Disabled fallback buttons become interactive when Alpine initializes this section.
+{% enddoc %}
+
+<div class="counter" x-data="easelCounter">
+  <button type="button" aria-label="{{ 'general.counter.decrease' | t | escape }}" disabled :disabled="false" @click="count -= 1">−</button>
+  <output x-text="count">0</output>
+  <button type="button" aria-label="{{ 'general.counter.increase' | t | escape }}" disabled :disabled="false" @click="count += 1">+</button>
+</div>

package/dist/templates/js/alpine/src/main.js

@@ -0,0 +1,19 @@
+import Alpine from 'alpinejs';
+Alpine.data('easelCounter', () => ({ count: 0 }));
+Alpine.start();
+function handleSectionLoad(event) {
+    if (event.target instanceof HTMLElement)
+        Alpine.initTree(event.target);
+}
+function handleSectionUnload(event) {
+    if (event.target instanceof HTMLElement)
+        Alpine.destroyTree(event.target);
+}
+document.addEventListener('shopify:section:load', handleSectionLoad);
+document.addEventListener('shopify:section:unload', handleSectionUnload);
+if (import.meta.hot) {
+    import.meta.hot.dispose(() => {
+        document.removeEventListener('shopify:section:load', handleSectionLoad);
+        document.removeEventListener('shopify:section:unload', handleSectionUnload);
+    });
+}

package/dist/templates/js/base/_gitignore

@@ -0,0 +1,5 @@
+node_modules/
+.easel/
+*.zip
+assets/easel-*
+snippets/easel-assets.liquid

package/dist/templates/js/base/assets/easel.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="16" fill="#171717"/>
+  <path d="M32 9v8M23 41l-6 14m24-14 6 14M14 41h36M20 17h24v18H20z" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/templates/js/base/config/settings_data.json

@@ -0,0 +1,12 @@
+{
+  "current": {
+    "background": "#f5f2eb",
+    "foreground": "#171714"
+  },
+  "presets": {
+    "Default": {
+      "background": "#f5f2eb",
+      "foreground": "#171714"
+    }
+  }
+}

package/dist/templates/js/base/config/settings_schema.json

@@ -0,0 +1,27 @@
+[
+  {
+    "name": "theme_info",
+    "theme_name": "__THEME_NAME__",
+    "theme_version": "0.1.0",
+    "theme_author": "Billy Noyes",
+    "theme_documentation_url": "https://github.com/BillyNoyes/Easel",
+    "theme_support_url": "https://github.com/BillyNoyes/Easel/issues"
+  },
+  {
+    "name": "t:settings.colors.name",
+    "settings": [
+      {
+        "type": "color",
+        "id": "background",
+        "label": "t:settings.colors.background",
+        "default": "#f5f2eb"
+      },
+      {
+        "type": "color",
+        "id": "foreground",
+        "label": "t:settings.colors.foreground",
+        "default": "#171714"
+      }
+    ]
+  }
+]