💨 Razorwind is a unified set of tools that make creating design systems a breeze.

[!IMPORTANT] This repository, and the apps, libraries, and tools contained within, is still in it's initial development phase. As a result, bugs and issues are expected with it's usage. When the main development phase completes, a proper release will be performed, the packages will be available through NPM (and other distributions), and this message will be removed. However, in the meantime, please feel free to report any issues you may come across.

Razorwind - Zed Theme Extension Plugin

Razorwind - Zed Theme Extension creates Zed-installable theme extensions from design tokens. Output matches official Zed extension layout (Dracula for Zed is a good reference).

Installing

Using pnpm:

pnpm add -D @razorwind/zed

npm install -D @razorwind/zed

yarn add -D @razorwind/zed

Usage

import { defineConfig } from "@razorwind/core";
import zed, { flattenTokens } from "@razorwind/zed";

export default defineConfig({
  plugins: [
    zed({
      id: "my-theme",
      name: "My Theme",
      authors: ["Acme <[email protected]>"],
      mapTheme: tokens => {
        const flat = flattenTokens(tokens);
        const color = (path: string) =>
          flat.find(t => t.path === path)?.cssValue ?? "#000000";

        return {
          name: "My Theme",
          themes: [
            {
              name: "My Theme Dark",
              appearance: "dark",
              style: {
                "editor.background": color("color.bg"),
                "editor.foreground": color("color.fg"),
                syntax: {
                  comment: { color: color("color.muted") }
                }
              }
            },
            {
              name: "My Theme Light",
              appearance: "light",
              style: {
                "editor.background": color("color.bg"),
                "editor.foreground": color("color.fg")
              }
            }
          ]
        };
      }
    })
  ]
});

Generated package (under zed-extension/ by default):

• themes/*.json — Zed theme collection documents from mapTheme
• extension.toml — Zed extension manifest
• README.md
• INSTALL.md — Zed extensions store + manual install steps

Options

| Option | Default | Description | | --------------- | -------------------------------------------- | -------------------------------------------------------- | | id | (required) | Extension id slug for extension.toml | | mapTheme | (required) | (tokens) => collection, array, or record | | outputPath | "zed-extension" | Output directory for the extension package | | name | title-cased id | Human-readable extension name | | version | "0.0.1" | Extension version | | schemaVersion | 1 | extension.toml schema version | | authors | — | extension.toml authors array | | themeSchema | https://zed.dev/schema/themes/v0.2.0.json | Default $schema for theme JSON | | installGuide | (generated) | Override body for generated INSTALL.md |

mapTheme return shapes: a single ZedTheme collection, an array, or a Record<string, ZedTheme>. Each collection contains themes[] variants with appearance: "dark" | "light" and a style object (UI keys, optional syntax, optional players).

Install in Zed

Publish or install via the Zed extensions store, or copy themes/*.json to ~/.config/zed/themes and pick the theme under Settings → Select Theme. See generated INSTALL.md for full steps.

Development

Building

Run nx build zed to build the library.

Running unit tests

Run nx test zed to execute the unit tests via Vitest.